Що таке Event bubbling та Event capturing?

Повне пояснення

Що це і навіщо

• Event bubbling та capturing — два режими propagation у DOM, що визначають порядок обробки подій від цільового елемента до кореня і навпаки.

Ключові принципи

• Bubbling (підняття) – подія спочатку обробляється на елементі, де вона виникла, а потім «піднімається» через батьківські вузли.
• Capturing (захоплення) – подія «піймається» на шляху від кореня до цільового елемента.
• В обох випадках можна зупинити propagation за допомогою event.stopPropagation() або event.stopImmediatePropagation().

Як це працює

• При виклику addEventListener(type, handler, {capture: true}) обробник підписується на фазу захоплення.
• Якщо флаг {capture: false} (або не вказано), обробник підписується на фазу bubbling.
• Фаза target (ціль) виконується між захопленням і підняттям.

Практика та реалізація

// Capturing
document.addEventListener('click', handler, {capture: true});
// Bubbling (default)
document.addEventListener('click', handler);

Тестування

• У Jest можна перевірити порядок виклику обробників, використовуючи jest.fn() і симуляцію подій через dispatchEvent.

Особливості в контексті React

• У React події обгортаються у SyntheticEvent, який підтримує bubbling. Capturing можна реалізувати через onClickCapture.

Оптимізація та edge cases

• Надмірне використання bubbling може призвести до непередбачуваних побічних ефектів, особливо при глибокій вкладеності.
• Для критичних подій (наприклад, клавіші Escape) часто використовують capturing, щоб перехопити їх на найвищому рівні.

Часті помилки

1. Не розуміння, що addEventListener за замовчуванням працює в bubbling.
2. Застосування stopPropagation у всіх обробниках, що блокує інші слушники.
3. Використання event.target замість this у класових компонентах.
4. Забудова про фазу target, що може вплинути на логіку.
5. Перевантаження кореневого елемента (наприклад, document) обробниками.
6. Неочікуване перехоплення подій у фреймах (iframe).
7. Відсутність preventDefault при необхідності.
8. Використання capture: true у всіх обробниках, що знижує продуктивність.

Cheatsheet

• capture: true → capturing, false або не вказано → bubbling.
• event.stopPropagation() → зупинити подальший propagation.
• event.stopImmediatePropagation() → зупинити інші обробники на тому ж елементі.
• event.target → елемент, де подія виникла; this у синтетичних обробниках React → елемент, на якому підписано слухач.