Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Делегування подій (Event Delegation)». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

Іншими словами:
**один слухач керує подіями безлічі дочірніх елементів**.

---

## Навіщо це потрібно (ключові тези для співбесіди)

- **Менше обробників** -> менше пам'яті, швидша робота сторінки.
- **Працює для динамічно доданих елементів** -> навіть якщо елемент з'явився пізніше, батьківський обробник його "спіймає".
- **Краща керованість** -> вся логіка в одному місці, а не розмазана по дереву DOM.

---

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

Ми хочемо обробити кліки по 100 кнопках:

Наївно:

```js
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('clicked');
  });
});
```

Правильно (делегування):

```js
document.body.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log('clicked');
  }
});
```

---

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

1. Користувач клікає по кнопці.
2. Подія **спливає** вгору по дереву.
3. Обробник на `body` перехоплює подію.
4. Ми перевіряємо `event.target`, щоб визначити елемент-кандидат.

---

## Часта помилка на співбесіді

Плутають `target` і `currentTarget`:

- **event.target** - елемент, по якому клікнули (джерело).
- **event.currentTarget** - елемент, на якому висить слухач (батько).

---

## Коротке визначення (якщо interviewer просить стисло)

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати212 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.