Skip to main content

Делегування подій (Event Delegation)

JavaScriptJunior~1 хв читання
Запропонувати правку

Делегування подій - це прийом у 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 просить стисло)

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

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

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

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

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