Что такое bubbling phase?

Что такое фаза всплытия (bubbling phase)?

Фаза всплытия — это вторая фаза распространения события в DOM после фазы погружения (capturing). Когда событие происходит на целевом элементе, оно начинает всплывать вверх по иерархии DOM: от целевого элемента к его родителю, затем к родителю родителя и так до самого корня (document). Это стандартное поведение для большинства событий (например, click, mousedown).

Как это работает?

Представьте структуру: div > p > button. При клике на button событие сначала проходит фазу погружения (от document к button), затем достигает цели (target phase), и после этого начинается всплытие: button -> p -> div -> body -> html -> document. На каждом этапе можно перехватить событие с помощью обработчика, если он был назначен на соответствующем элементе.

Пример кода

document.querySelector('div').addEventListener('click', () => {
  console.log('div clicked');
});
document.querySelector('p').addEventListener('click', () => {
  console.log('p clicked');
});
document.querySelector('button').addEventListener('click', () => {
  console.log('button clicked');
});
// При клике на button вывод будет:
// button clicked
// p clicked
// div clicked

Где применяется?

Всплытие используется для делегирования событий: вместо назначения обработчика каждому дочернему элементу, можно назначить один обработчик на родителя и ловить события от детей через event.target. Это улучшает производительность и упрощает код, особенно при динамическом добавлении элементов.

Вывод

Понимание фазы всплытия необходимо для эффективной работы с событиями в JavaScript, особенно при реализации делегирования и отладки неожиданного срабатывания обработчиков.