Спливання подій

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

Визначення

Спливання подій (event bubbling) - це механізм, при якому подія, що сталася на вкладеному елементі, передається (спливає) вгору по дереву DOM до його батьків.

Іншими словами: якщо ти клікнув по кнопці, браузер спочатку обробить подію на кнопці, а потім підніме її до контейнера, body і навіть document.

Приклад DOM-структури

javascript

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

Приклад: як спливає подія

javascript

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

document.querySelector('#parent').addEventListener('click', () => {
  console.log('Батько');
});

document.body.addEventListener('click', () => {
  console.log('BODY');
});

Тепер клік по кнопці (#child) виведе:

javascript

Кнопка
Батько
BODY

Спочатку спрацював обробник на елементі, де клікнули, потім подія "спливла" вгору по дереву до body.

Механізм спливання

Подія виникає на конкретному елементі → event.target.
Потім вона передається вгору: target → його батько → document → window.
На кожному рівні викликаються обробники, якщо вони є.

Візуально

javascript

<button> → <div> → <body> → <html> → document

Кожен рівень може "почути" подію, якщо на ньому є обробник.

Зупинка спливання

Іноді не потрібно, щоб подія підіймалася далі. Тоді використовується:

javascript

event.stopPropagation();

javascript

child.addEventListener('click', (e) => {
  console.log('Кнопка');
  e.stopPropagation(); // зупинили спливання
});

Тепер спрацює тільки:

javascript

Кнопка

Навіщо потрібне спливання

1. Делегування подій (економія обробників)

Можна повісити один обробник на батьківський елемент і ловити події від його дітей.

javascript

<ul id="menu">
  <li>Головна</li>
  <li>Каталог</li>
  <li>Контакти</li>
</ul>

javascript

menu.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Клік по пункту:', e.target.textContent);
  }
});

Працює навіть для нових <li>, доданих динамічно. Це неможливо без спливання.

2. Глобальні слухачі

Можна слухати події на всьому документі:

javascript

document.addEventListener('click', (e) => {
  console.log('Клік по сторінці');
});

Що не спливає

Деякі події не спливають, наприклад:

blur / focus
mouseenter / mouseleave

(у них є аналоги, які спливають - focusin і focusout).

Підсумок

Поняття	Опис
Спливання подій	Процес, при якому подія підіймається від вкладеного елемента до батьків
event.target	Елемент, де подія сталася
event.currentTarget	Елемент, чий обробник зараз виконується
event.stopPropagation()	Зупиняє спливання
Використовується для	Делегування, глобальних обробників, логування

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

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

Premium

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