Пропагування подій у JavaScript та його фази

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

#Фази пропагування подій

1. Фаза захоплення — подія спочатку проходить через усі батьківські елементи зверху (корінь) до цільового елемента.
2. Фаза цілі — подія досягає цільового елемента, де вона була ініційована.
3. Фаза спливання — подія починає "спливати" назад від цільового елемента до верхніх елементів у DOM.

Приклад використання фаз пропагування подій:

[index.html]

[index.js]```html

```

Як це працює:

• Фаза захоплення: Коли користувач натискає кнопку, подія спочатку потрапляє на батьківський елемент, де спрацьовує перший обробник.
• Фаза цілі: Подія досягає дочірнього елемента (ціль події), де спрацьовує другий обробник.
• Фаза спливання: Потім подія починає спливати назад, і третій обробник спрацьовує на батьківському елементі.

почати з кореня

пропагувати через батька

досягти цілі

спливати назад

Фаза захоплення

Фаза цілі

Фаза спливання

Кореневий елемент

Батьківський елемент

Дочірній елемент

#Як контролювати фази

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

Не забувайте про stopPropagation():

Використання методу event.stopPropagation() запобігатиме пропагуванню події в обох фазах (захоплення та спливання).