Делегування подій

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

Делегування подій — це техніка в JavaScript, де обробник подій прикріплюється до батьківського елемента, а не до кожного дочірнього елемента окремо.

Ця техніка працює завдяки механізму спливання подій — спочатку подія виникає на цільовому елементі, а потім спливає через дерево DOM.

Простий приклад

Припустимо, у вас є список:

html

<ul id="menu">
  <li>Головна</li>
  <li>Про нас</li>
  <li>Контакт</li>
</ul>

Замість того, щоб прикріплювати обробник click до кожного <li>, ви можете прикріпити один обробник до <ul>:

javascript

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).

Порада:

Делегування особливо корисне, коли у вас є багато схожих елементів і ви хочете прикріпити обробник один раз — ефективно та чисто.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Делегування подій

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

#Простий приклад

#Як це працює?

#Переваги делегування подій