В JavaScript обработка событий в DOM происходит в три этапа: погружение (capturing), целевая фаза (target) и всплытие (bubbling).

Погружение (capturing) — событие сначала проходит от корневого элемента документа вниз по дереву DOM к целевому элементу. На этом этапе обработчики с параметром capture: true могут перехватывать событие.

Целевая фаза (target) — событие достигает элемента, на котором произошло действие.

Всплытие (bubbling) — после целевой фазы событие поднимается обратно вверх по дереву DOM к корню, вызывая обработчики с capture: false (по умолчанию).

Пример:

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

parent.addEventListener('click', () => console.log('parent capture'), true); // погружение
parent.addEventListener('click', () => console.log('parent bubble')); // всплытие
child.addEventListener('click', () => console.log('child target'));

// При клике на child порядок вызова:
// 1. parent capture (погружение)
// 2. child target
// 3. parent bubble (всплытие)

Таким образом, всплытие позволяет обрабатывать события на родительских элементах без необходимости навешивать обработчики на каждый дочерний элемент.

Что такое всплытие и погружение событий в JavaScript?