Более чистый код с делегированием событий в JavaScript

Делегирование событий в JavaScript — это метод, который позволяет обрабатывать события нескольких элементов с помощью одного прослушивателя событий, прикрепленного к их родительскому элементу.

Вместо того, чтобы прикреплять прослушиватель событий к каждому отдельному дочернему элементу, вы прикрепляете один прослушиватель событий к родительскому элементу и используете его для прослушивания событий, происходящих в дочерних элементах.

Когда событие происходит в дочернем элементе, событие всплывает до родительского элемента, который затем может использовать объект события, чтобы определить, какой дочерний элемент инициировал событие.

Это позволяет обрабатывать события нескольких дочерних элементов с помощью одного прослушивателя событий, прикрепленного к родительскому элементу.

Пример

const parentElement = document.querySelector('.parent');

parentElement.addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    console.log('Clicked on child element');
  }
});

Объяснение

В этом примере у нас есть родительский элемент с классом «родительский» и несколько дочерних элементов с классом «дочерний».

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

В функции прослушивателя событий мы используем свойство event.target, чтобы определить, какой дочерний элемент инициировал событие.

Затем мы проверяем, есть ли у элемента event.target класс 'child', используя метод classList.contains(), и если это так, мы записываем сообщение в консоль.

Используя делегирование событий, мы можем обрабатывать события нескольких дочерних элементов с помощью одного прослушивателя событий, прикрепленного к родительскому элементу.

Этот подход может привести к более чистому и эффективному коду, особенно при работе с большим количеством дочерних элементов.

Это хорошая практика?

Да, делегирование событий обычно считается хорошей практикой в JavaScript, особенно когда у вас есть большое количество дочерних элементов, которым необходимо обрабатывать события одного и того же типа. Вот несколько причин, почему:

Уменьшение использования памяти. Присоединение нескольких обработчиков событий к дочерним элементам может занимать много памяти, что замедляет работу приложения. Делегирование событий позволяет вам прикрепить один прослушиватель событий к родительскому элементу, который использует меньше памяти.
Повышенная производительность. Поскольку вы прикрепляете один прослушиватель событий к родительскому элементу, ваш код будет более производительным. Это связано с тем, что браузеру не нужно тратить время на подключение и удаление прослушивателей событий для каждого дочернего элемента.
Динамические элементы. Делегирование событий также хорошо работает с динамически генерируемыми элементами. Если вы добавите новый дочерний элемент к родительскому элементу, он автоматически унаследует прослушиватель событий, и вам не нужно будет присоединять новый прослушиватель событий к новому элементу.
Упрощенный код. Использование делегирования событий также может сделать ваш код более простым и удобным в сопровождении. Вместо того, чтобы прикреплять прослушиватели событий к нескольким дочерним элементам, вы можете прикрепить один прослушиватель событий к родительскому элементу и обрабатывать события для всех дочерних элементов в одной функции.

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

Заключение

Независимо от того, являетесь ли вы новичком или опытным разработчиком JavaScript, овладение делегированием событий является важным навыком, который поможет вам создавать более качественные веб-приложения.

Поделитесь статьей, если узнали что-то интересное!

Создавайте приложения с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите: