Зачем нужны три фазы событий?

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

Три фазы

1. Погружение (capturing) — от document вниз к цели.
2. Цель (target) — на элементе-источнике.
3. Всплытие (bubbling) — от цели вверх к родителям.

document → parent → target → parent → document
       погружение    ↑      всплытие

Зачем нужны три фазы

Гибкость обработки

Можно выбрать, когда перехватить событие:

• Всплытие (по умолчанию) — обработка после элемента, снизу вверх → делегирование (один обработчик на родителе для всех потомков).
• Погружение — обработка до элемента, сверху вниз → ранний перехват (глобальные шорткаты, блокировка).
• Цель — на самом элементе.

Делегирование событий

Всплытие позволяет одному обработчику на родителе обслуживать всех потомков, включая динамических — экономит обработчики.

list.addEventListener('click', (e) => {
  if (e.target.matches('li')) { /* обработка */ }
});

Контроль порядка

Можно перехватить событие раньше (capturing) или позже (bubbling), управлять распространением (stopPropagation).

Историческая причина

Разные браузеры исторически поддерживали разные модели (IE — всплытие, Netscape — погружение). W3C объединил их в три фазы для совместимости и гибкости.

Коротко для собеседования

Три фазы (погружение → цель → всплытие) дают гибкость: перехватывать событие на пути вниз (ранний перехват), на элементе или на пути вверх (делегирование — один обработчик на родителе для всех потомков). Всплытие — основа делегирования, погружение — для приоритетного перехвата. Модель объединила исторические подходы IE и Netscape.