> На какой стадии отрабатывают внешние нецелевые обработчики событий в DOM (JavaScript)

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

Внешние нецелевые обработчики событий в DOM отрабатывают на стадии всплытия (bubbling), когда событие поднимается от целевого элемента (target) вверх по дереву до корня документа. Это происходит после стадии погружения (capturing) и после срабатывания обработчиков, назначенных непосредственно на целевой элемент. Внешние обработчики - это слушатели, зарегистрированные на родительских или вышестоящих узлах, но не на самом элементе-цели.

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

DOM-событие проходит три фазы:

1. Погружение (capturing) - от window до целевого элемента.
2. Целевая фаза (target phase) - обработчики на самом элементе, на который указывает event.target.
3. Всплытие (bubbling) - от целевого элемента обратно вверх до window.

Внешние нецелевые обработчики - это слушатели, зарегистрированные на предках целевого элемента (например, на document, body, контейнере). Они срабатывают именно на фазе всплытия, если при регистрации не указан capture: true. Если указан capture: true, они отрабатывают на фазе погружения - до того, как событие достигнет цели.

Важно различать:

• event.target - элемент, на котором событие произошло изначально.
• event.currentTarget - элемент, на котором в данный момент выполняется обработчик (тот, на котором слушатель зарегистрирован).

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

На практике

На практике внешние обработчики на фазе всплытия используются для:

• делегирования событий - один слушатель на родителе вместо множества на детях;
• аналитики и логирования - перехват действий пользователя на уровне документа;
• глобальных обработчиков - например, закрытие модального окна по клику вне его;
• перехвата ошибок - обработка событий, которые не были обработаны на нижних уровнях.

При работе с внешними обработчиками нужно помнить про stopPropagation(): если дочерний обработчик его вызывает, всплытие прекращается, и внешние слушатели не сработают. Также stopImmediatePropagation() блокирует и другие обработчики на том же элементе.

Пример кода

JAVASCRIPT
document.querySelector('.container').addEventListener('click', (event) => {
  // Этот обработчик сработает на фазе всплытия,
  // когда клик произойдёт по любому элементу внутри .container
  console.log('Всплытие:', event.target.tagName, 'currentTarget:', event.currentTarget.className);
});

// Вариант с capture: true - сработает на фазе погружения
document.querySelector('.container').addEventListener('click', (event) => {
  console.log('Погружение:', event.target.tagName);
}, true);

Если кликнуть по кнопке внутри .container, порядок вывода будет:

1. Погружение: BUTTON (если capture-обработчик зарегистрирован)
2. Обработчики на самой кнопке
3. Всплытие: BUTTON currentTarget: container

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

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

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

Интервьюер проверяет:

• понимание модели распространения событий в DOM;
• знание фаз capturing, target, bubbling;
• умение различать event.target и event.currentTarget;
• понимание делегирования событий и его преимуществ;
• знание параметров addEventListener (третий аргумент - capture или объект с опциями);
• осознание последствий stopPropagation() и stopImmediatePropagation().

Для senior-уровня важно не просто перечислить фазы, а показать понимание практических сценариев и подводных камней.

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

• Утверждение, что внешние обработчики срабатывают на фазе погружения - это верно только при capture: true, по умолчанию они на всплытии.
• Путаница между target и currentTarget - частая ошибка даже у опытных разработчиков.
• Игнорирование того, что событие не всплывает, если вызван stopPropagation() в обработчике на целевом элементе.
• Забывают, что некоторые события (например, focus, blur, scroll) не всплывают - для них внешние обработчики на всплытии не сработают.
• Неправильное понимание порядка: capture-обработчики на внешних элементах срабатывают до обработчиков на цели, а не после.