Одним из самых мощных и удобных методов в JQuery является делегация событий – способ, которым вы можете добавить один обработчик событий на родительский элемент вместо подключения нескольких обработчиков для многих дочерних элементов.
Так вот как это сделать в ванили!
- Sphynx
- Maine Coon
- Bristish Shorthair
const ul = document.querySelector('ul');
ul.addEventListener('click', e => {
const { target } = e;
if (target.matches('li')) {
callback(); // If target is an li, run callback
}
});
Здесь мы прилагаем только один слушатель событий для родителя UL элемент, но внутри нашего обработчика мы проверяем, соответствует ли целевую цену мероприятия лита . Если это так, мы запустим наш обратный вызов.
Это все хорошо и хорошо для простых HTML-списков, но что, если элементы списка содержат собственные дети?
- Blue Sphynx
- Maine Coon Rarer breed
- Fiesty Bristish Shorthair
С этим более сложным HTML-деревом целью мероприятия не может быть элемент. Любой из Детские промежутки могут быть нажаты и будут зарегистрироваться в качестве цели. Чтобы обработать это, мы могли бы либо добавить некоторую дополнительную логику для проверки следующего ближайшего элемента вверх по дереву, или мы можем просто добавить CSS Указатели-события: нет; Правило, которое заставит о пропандах никогда не быть целью указателей:
span {
pointer-events: none;
}
С этим правилом на месте, даже если элемент актуального нажатия – это в пределах SPAN теперь считается частью Содержание и целью мероприятия считаются Таким образом, регистрируя наш обратный вызов без суеты, нет моды! 😃
Посмотрите больше #Jsbits в моем блоге, jsbits-yo.com Отказ Или следовать за мной на Twitter Отказ
Оригинал: “https://dev.to/js_bits_bill/event-delegation-with-vanilla-js-js-bits-2lnb”