> Что такое event bubbling и event capturing в JavaScript (JavaScript)

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

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

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

Спецификация DOM Events описывает три фазы прохождения события: capturing (погружение), target (достижение цели) и bubbling (всплытие). Когда происходит событие, браузер сначала проходит от window до целевого элемента, вызывая обработчики, установленные с опцией {capture: true} - это фаза capturing. Затем событие достигает целевого элемента - фаза target. После этого событие поднимается обратно к window, вызывая обычные обработчики - фаза bubbling.

По умолчанию все обработчики, добавленные через addEventListener без третьего аргумента или с {capture: false}, срабатывают на фазе bubbling. Чтобы повесить обработчик на capturing, нужно передать {capture: true} или просто true.

Bubbling - более интуитивная модель, так как событие "всплывает" от конкретного элемента к родителям. Это позволяет вешать один обработчик на контейнер и ловить события от всех его дочерних элементов (делегирование). Capturing используется реже, но может быть полезен для перехвата события до того, как оно дойдет до целевого элемента.

Важно: не все события всплывают. Например, focus, blur, load, unload, mouseenter, mouseleave не имеют фазы bubbling. Это сделано для производительности и семантической корректности.

На практике

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

Capturing применяется реже, но бывает полезен в сложных UI-компонентах, когда нужно перехватить событие до того, как его обработает дочерний элемент. Например, в drag-and-drop системах или при реализации модальных окон, где нужно предотвратить всплытие клика на фоновый слой.

Метод event.stopPropagation() останавливает дальнейшее распространение события на текущей фазе. Если вызван на capturing, событие не дойдет до target и не начнет bubbling. Если на bubbling - не пойдет выше. event.stopImmediatePropagation() дополнительно предотвращает вызов других обработчиков на том же элементе.

Пример кода

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

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

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

  // Фаза bubbling (по умолчанию)
  parent.addEventListener('click', () => {
    console.log('parent bubbling');
  });

  // Фаза target (всегда срабатывает на целевом элементе)
  child.addEventListener('click', () => {
    console.log('child target');
  });

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

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

Начни с краткого определения двух фаз. Объясни порядок прохождения события: capturing → target → bubbling. Упомяни, что по умолчанию обработчики работают на bubbling. Приведи пример делегирования как практического применения bubbling. Если спросят про capturing - скажи, что он используется реже, но полезен для перехвата событий до целевого элемента. Упомяни stopPropagation и stopImmediatePropagation. Не углубляйся в детали реализации браузеров, если не спросят.

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

Интервьюер проверяет понимание модели событий в DOM, знание фаз распространения и умение применять это на практике. Для junior-уровня достаточно объяснить базовую механику и показать пример делегирования. Важно понимать разницу между event.target и event.currentTarget, а также знать, что не все события всплывают. Хороший ответ показывает, что кандидат не просто заучил теорию, а понимает, как это работает в реальных проектах.

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

• Путаница между фазами: думают, что capturing - это когда событие идет от ребенка к родителю, а не наоборот.
• Уверенность, что все события всплывают (забывают про focus, blur и другие).
• Непонимание разницы между event.target (исходный элемент) и event.currentTarget (элемент, на котором висит обработчик).
• Злоупотребление stopPropagation без понимания последствий - это может сломать другие обработчики на родителях.
• Использование return false в обработчиках, думая, что это останавливает всплытие (на самом деле работает только в jQuery, в чистом JS нужно вызывать preventDefault и stopPropagation явно).