Рубрики
Без рубрики

Делегация событий с ванильными ся

Одним из самых мощных и удобных методов в JQuery является делегация событий – способ, которым вы … помечены WebDev, JavaScript.

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