У DOM майже всі події розповсюджуються через ієрархічне дерево елементів. Це означає, що коли ви взаємодієте з дочірнім елементом (наприклад, натискаєте кнопку), ця подія "спливає" вгору по дереву – спочатку обробляється саме на елементі-цілі, а потім – на його батьківських елементах. Такий механізм дозволяє реалізувати делегування подій та спрощує керування обробниками для складних інтерфейсів.

Приклад: Розповсюдження подій

Розглянемо простий приклад, де подія "click" спочатку обробляється на кнопці, а потім "спливає" до батьківського елемента (div):

https://stackblitz.com/edit/web-platform-jpk63zl4?devToolsHeight=33&file=index.html

Що відбувається при кліку на кнопку:

• Коли ви натискаєте кнопку, спочатку викликається обробник події, прив’язаний до кнопки (виводить в консоль "button").
• Потім подія "спливає" до батьківського елемента <div>, і викликається його обробник (виводить в консоль "div").

Фази розповсюдження подій

Розповсюдження подій складається з трьох основних фаз:

1. Фаза захоплення (Capture Phase)
   • Подія рухається вниз від кореня документа до цільового елемента.
   • Використовується рідко, але корисна для перехоплення подій до того, як вони дійдуть до цільового елемента.
2. Цільова фаза (Target Phase)
   • Подія досягає елемента, на якому виникла (наприклад, кнопки).
3. Фаза спливання (Bubbling Phase)
   • Подія рухається вгору від цільового елемента до кореня документа.
   • Це фаза, на якій події обробляються за замовчуванням в більшості випадків.

Властивості event.target та event.currentTarget:

• event.target:

  Вказує на початковий елемент, на якому подія була викликана. Це може бути як кнопка, так і будь-який інший дочірній елемент.

• event.currentTarget:

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

https://stackblitz.com/edit/web-platform-xcousecn?devToolsHeight=33&file=script.js

• В цьому прикладі ми встановлюємо один і той же обробник logEvent для всіх елементів DOM.
• При кліку на будь-який елемент, в консоль буде виведено, який елемент ініціював подію (event.target) і на якому елементі обробляється подія (event.currentTarget).
• Це демонструє, як подія "спливає" від цільового елемента до батьків, що корисно при делегуванні подій.