Що таке "делегування подій"?

JavaScriptJunior~2 хв читання

Визначення

Делегування подій - це техніка, за якої ми вішаємо один обробник на батьківський елемент, а не на кожен дочірній, і за допомогою event.target визначаємо, на якому нащадку відбулася подія.

Тобто: ми "перехоплюємо" сплилу подію на рівні батька, замість того щоб вішати безліч обробників на кожен елемент.

Приклад без делегування

javascript

<ul>
  <li>Головна</li>
  <li>Каталог</li>
  <li>Контакти</li>
</ul>

<script>
  document.querySelectorAll('li').forEach((li) => {
    li.addEventListener('click', () => {
      console.log('Клік по пункту:', li.textContent);
    });
  });
</script>

Мінуси:

створюється багато обробників (по одному на кожен <li>),
нові елементи, додані динамічно, не будуть прослуховуватися.

Приклад з делегуванням

javascript

<ul id="menu">
  <li>Головна</li>
  <li>Каталог</li>
  <li>Контакти</li>
</ul>

<script>
  const menu = document.querySelector('#menu');

  menu.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      console.log('Клік по пункту:', event.target.textContent);
    }
  });
</script>

Тепер всього один обробник, і він:

ловить кліки від усіх <li> (завдяки спливанню),
працює навіть для нових пунктів, доданих через JS.

Як це працює

Користувач клікає на конкретний <li>.
Подія спливає вгору до <ul>.
На рівні <ul> стоїть один обробник.
Через event.target ми дізнаємося, по якому елементу клікнули.

Приклад з динамічним контентом

javascript

menu.insertAdjacentHTML('beforeend', '<li>Про нас</li>');
// новий елемент теж буде "прослуховуватися" - нічого додавати не потрібно

Делегування працює автоматично навіть з елементами, доданими пізніше.

Приклад 2: делегування для кнопок "Видалити"

javascript

<ul id="list">
  <li>Елемент 1 <button class="delete">×</button></li>
  <li>Елемент 2 <button class="delete">×</button></li>
  <li>Елемент 3 <button class="delete">×</button></li>
</ul>

javascript

list.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('li').remove(); // видаляємо батьківський елемент
  }
});

Один обробник - і можна видаляти будь-яку кількість елементів. Без делегування довелося б вішати слухач на кожну кнопку.

Переваги делегування

Перевага	Опис
Менше коду	Один обробник замість десятків
Ефективність	Менше навантаження на пам'ять і CPU
Гнучкість	Працює з динамічно доданими елементами
Зручність	Всі події обробляються централізовано

Важливо пам'ятати

event.target - елемент, на якому відбулася подія; може бути вкладеним (наприклад, всередині <li>).
Іноді потрібно піднятися до батька:

javascript
e.target.closest('li')
безпечний спосіб знайти потрібний елемент.
Якщо всередині елементів є кнопки, посилання тощо, і ти не хочеш, щоб клік по них теж оброблявся - додай перевірку або stopPropagation().

Підсумок

Поняття	Що це
Делегування подій	Призначення одного обробника на батька для обробки подій усіх нащадків
Ґрунтується на	Спливанні подій
Головний інструмент	`event.target` і `closest()`
Навіщо потрібно	Скоротити код, прискорити роботу, зручно обробляти динамічний DOM

Запам'ятай просто: Делегування - це коли "батько слухає за дітей". Один обробник - тисячі кліків під контролем.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.