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

Что такое делегирование событий?

Делегирование событий (event delegation) — это техника в JavaScript, при которой обработчик события навешивается на родительский элемент, а не на каждый дочерний элемент отдельно.

Эта техника работает благодаря механизму всплытия событий (event bubbling) — событие сначала происходит на целевом элементе, а затем поднимается вверх по дереву DOM.

Простой пример

Допустим, у вас есть список:

<ul id="menu">
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</ul>

Вместо того чтобы вешать click-обработчик на каждый <li>, можно повесить один обработчик на <ul>:

const menu = document.getElementById("menu");

menu.addEventListener("click", (event) => {
  const target = event.target;
  
  if (target.tagName === "LI") {
    console.log("Вы кликнули по пункту:", target.textContent);
  }
});

Как это работает?

• Пользователь кликает на <li>.
• Событие всплывает от <li> к <ul>.
• Обработчик на <ul> ловит это событие.
• Мы проверяем event.target, чтобы понять, на каком именно элементе произошёл клик.

Преимущества делегирования событий

• Меньше обработчиков → меньше потребление памяти.
• Работает с динамическими элементами, которых изначально не было в DOM.
• Упрощает управление событиями при изменении DOM.

Минусы и предостережения

• Нужно всегда проверять event.target, чтобы убедиться, что событие произошло на нужном элементе.
• Может быть нежелательное поведение, если структура DOM изменяется динамически.
• Не работает, если событие не всплывает (например, blur, focus, scroll — для них нужно использовать capture).