Занурення подій

JavaScriptJunior~1 хв читання

Визначення

Занурення подій (event capturing) - це етап, коли подія йде згори вниз по дереву DOM, від кореня документа (window → document → html → body → …) до елемента, на якому подія відбулася.

Після цього настає етап спливання (bubbling) - у зворотному напрямку (знизу вгору).

Етапи проходження події

Кожна подія в DOM проходить три фази:

Занурення (capturing phase) - подія йде згори вниз.
Ціль (target phase) - подія досягає елемента, на якому відбулася.
Спливання (bubbling phase) - подія піднімається назад угору.

Візуально

javascript

window
  ↓
document
  ↓
<html>
  ↓
<body>
  ↓
<div id="parent">
  ↓
<button id="child"> ← подія відбулася тут
  ↑
<div id="parent">
  ↑
<body>
  ↑
<html>
  ↑
document
  ↑
window

Стрілки вгору - спливання. Стрілки вниз - занурення.

Приклад: обробники з фазами

javascript

<div id="parent">
  <button id="child">Клікни</button>
</div>

javascript

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('Батько - спливання');
});

parent.addEventListener('click', () => {
  console.log('Батько - занурення');
}, true); // ← третій аргумент = true → слухаємо на етапі занурення

child.addEventListener('click', () => {
  console.log('Кнопка');
});

При кліку по кнопці результат буде:

javascript

Батько - занурення
Кнопка
Батько - спливання

Чому так:

Спочатку подія спускається вниз → спрацьовує обробник "на зануренні".
Потім доходить до кнопки (ціль).
Далі спливає назад → спрацьовує обробник "на спливанні".

Як увімкнути фазу занурення

Щоб обробник спрацював на етапі занурення, у addEventListener передають третій аргумент:

javascript

element.addEventListener('click', handler, true);

або сучасний варіант:

javascript

element.addEventListener('click', handler, { capture: true });

Приклад: два обробники на різних фазах

javascript

document.body.addEventListener('click', () => console.log('body capture'), true);
document.body.addEventListener('click', () => console.log('body bubble'));

Клік по кнопці всередині body:

javascript

body capture
button (target)
body bubble

Коли використовувати занурення

У реальній практиці воно потрібне рідко, але корисне, коли:

потрібно перехопити подію раніше, ніж вона дійде до цілі (наприклад, скасувати дію);
потрібен глобальний контроль за подіями (наприклад, для логування, трекінгу);
у вкладених компонентах, де важливе пріоритетне спрацювання "згори".

Порівняння зі спливанням

Фаза	Напрямок	Коли спрацьовує	Як увімкнути
Занурення (capturing)	згори вниз	до цілі	`{ capture: true }` або `true`
Ціль (target)	-	на елементі, де відбулася подія	завжди
Спливання (bubbling)	знизу вгору	після цілі	типово

Важливо

Типово всі обробники слухають спливання, якщо не вказано capture: true.
Можна слухати обидва етапи одночасно, встановивши два обробники з різними налаштуваннями.
stopPropagation() зупиняє подію на будь-якій фазі (і під час занурення, і під час спливання).

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

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

Premium

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