> Что такое всплытие и погружение событий в JavaScript и что происходит раньше (JavaScript)

Короткий ответ

Всплытие (bubbling) и погружение (capturing) - это две фазы распространения события в DOM. Погружение происходит раньше: событие сначала движется от корневого элемента вниз к цели (capturing phase), затем достигает целевого элемента (target phase), после чего всплывает вверх (bubbling phase). По умолчанию обработчики срабатывают на фазе всплытия, если не указан { capture: true }.

Подробное объяснение

Механизм распространения событий в JavaScript состоит из трёх фаз:

1. Фаза погружения (capturing phase) - событие движется от window через DOM-дерево вниз к целевому элементу. Обработчики, зарегистрированные с флагом capture: true, срабатывают на этой фазе.

2. Фаза цели (target phase) - событие достигает элемента, на котором произошло. Обработчики на самом элементе срабатывают независимо от фазы.

3. Фаза всплытия (bubbling phase) - событие поднимается обратно от целевого элемента к window. Большинство событий всплывают (исключения: focus, blur, load и некоторые другие).

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

На практике

Понимание фаз важно для:

• Делегирования событий - обработка событий на родителе через всплытие (экономит память, работает с динамическими элементами)
• Остановки распространения - event.stopPropagation() останавливает дальнейшее движение события (на любой фазе)
• Предотвращения конфликтов - когда несколько обработчиков на разных уровнях могут реагировать на одно событие

На практике всплытие используется гораздо чаще, чем погружение. Погружение обычно применяется для перехвата событий до того, как они достигнут цели (например, в библиотеках для работы с событиями или в отладке).

Пример кода

JAVASCRIPT
// HTML: <div id="parent"><button id="child">Click</button></div>

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

// Фаза погружения (третьим аргументом true)
parent.addEventListener('click', () => {
  console.log('parent capturing');
}, true);

// Фаза всплытия (третий аргумент false или отсутствует)
parent.addEventListener('click', () => {
  console.log('parent bubbling');
});

child.addEventListener('click', () => {
  console.log('child target');
});

// При клике на кнопку порядок вывода:
// "parent capturing" → "child target" → "parent bubbling"

Как отвечать на собеседовании

Начни с чёткого определения фаз, затем укажи, что погружение происходит раньше. Приведи простой пример с порядком вывода. Упомяни, что по умолчанию обработчики работают на всплытии. Если спросят про практическое применение - расскажи про делегирование и stopPropagation. Не углубляйся в редкие исключения, если не спросят.

Что проверяет интервьюер

• Понимание трёх фаз распространения событий и их порядка
• Знание разницы между capture: true/false
• Умение объяснить, как работает делегирование событий
• Понимание, какие события не всплывают
• Знание методов stopPropagation() и stopImmediatePropagation()

Типичные ошибки

• Путаница между фазами: думают, что всплытие происходит раньше погружения
• Утверждение, что все события всплывают (не всплывают focus, blur, scroll, mouseenter, mouseleave)
• Непонимание, что stopPropagation() работает на любой фазе, а не только на всплытии
• Путаница между stopPropagation() и preventDefault() - первый останавливает распространение, второй отменяет действие по умолчанию