Делегирование событий в браузере с использованием ванильного JavaScript

Одна из моих любимых вещей из jQuery (запрос) есть (было?) делегирование мероприятий. В частности, .на () метод.

Мы выбираем элемент DOM , а затем используем .на () чтобы прикрепить обработчик событий, который выполняется для определенного дочернего элемента этого элемента.

Почему это полезно? Потому что, если вы добавляете элементы динамически в DOM, один прослушиватель событий регистрируется через .on () будет работать со всеми дочерними элементами, даже с теми, которые были добавлены в DOM после регистрации обработчика событий.

Предположим, у вас есть столик. Внутри таблицы у нас есть набор строк, и в каждой строке есть кнопка с обработчиком щелчков.

Вы регистрируете прослушиватель событий при загрузке DOM:

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('button')

  for (const button of buttons) {
    button.addEventListener(...)
  }
})

Но если мы добавим новую строку в таблицу, мы также должны не забыть зарегистрировать новый прослушиватель событий.

Как мы можем воспроизвести ту же функциональность с помощью ванильного JavaScript?

Мы создаем функцию on , которая принимает селектор оболочки, тип события (например, строку "щелчок" ), строку дочернего селектора, которая будет соответствовать потомкам селектора оболочки. В этой функции мы сначала создаем цикл и добавляем прослушиватель событий к каждому элементу, который соответствует нашему селектору оболочки (чтобы он мог применяться к нескольким селекторам оболочки).

Затем, если цель события совпадает с нашим дочерним селектором (третий параметр функции), мы вызываем функцию обратного вызова, переданную в качестве 4-го параметра, передавая событие:

const on = (selector, eventType, childSelector, eventHandler) => {
  const elements = document.querySelectorAll(selector)
  for (element of elements) {
    element.addEventListener(eventType, eventOnElement => {
      if (eventOnElement.target.matches(childSelector)) {
        eventHandler(eventOnElement)
      }
    })
  }
}

Вот как мы можем вызвать эту функцию:

on('ul', 'click', '.module.complete', event => {
  const item = event.target
  //...your event handler
})

Теперь, когда мы нажимаем на элемент, который соответствует .module.complete под селектором ul будет запущен код в функции, которую мы передаем, и мы сможем извлечь ссылку на выбранный элемент из event.target .

Оригинал: “https://flaviocopes.com/javascript-event-delegation/”