Одним из самых мощных и удобных методов в 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”