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

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

Як працює делегування подій?

Коли подія спливає (bubbling) вгору по DOM, вона досягає батьківських елементів. Якщо обробник призначений на батьківському елементі, він може визначити, на якому дочірньому елементі виникла подія, використовуючи event.target.

Видалення елементів зі списку

При кліку на елемент списку (<li>) він буде видалений. Ми додаємо обробник лише на <ul>, а не на кожен <li> окремо.

https://stackblitz.com/edit/web-platform-d4pkuno4?devToolsHeight=33&file=script.js

Пояснення:

• Обробник події click встановлюється на <ul>, а не на кожен <li>.
• Коли користувач натискає на елемент списку, подія спливає до <ul>, де ми перевіряємо, чи event.target.tagName === 'LI'.
• Якщо так, то елемент видаляється (event.target.remove()).
• Це працює навіть для нових елементів, які додаються динамічно.

Приклад 2: Перевірка натискань на певні елементи

Делегування корисне, коли всередині одного контейнера є елементи з різною поведінкою.

https://stackblitz.com/edit/web-platform-o66sre1u?devToolsHeight=33&file=script.js

Пояснення:

• Ми використовуємо data-action атрибути, щоб визначити, що саме потрібно зробити при кліку.
• event.target.dataset.action дає нам значення атрибута data-action, і залежно від нього ми виконуємо відповідну дію.