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

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

Погружение (capturing)

Событие идёт от document вниз к целевому элементу. Обработчики срабатывают при { capture: true }:

parent.addEventListener('click', h, { capture: true });

Позволяет перехватить событие до дочерних обработчиков.

Целевая фаза (target)

Событие достигает элемента-источника (event.target), срабатывают его собственные обработчики.

Всплытие (bubbling)

Событие поднимается вверх к родителям до document. По умолчанию обработчики работают здесь:

parent.addEventListener('click', h); // всплытие

Основа делегирования событий.

Направление движения

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

Различия и применение

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

event.eventPhase показывает текущую фазу (1/2/3). stopPropagation прерывает на любой.

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

Фазы различаются направлением: погружение (capturing) — от document вниз к цели (ранний перехват, capture:true); целевая — на элементе; всплытие (bubbling) — от цели вверх к родителям (по умолчанию, для делегирования). Прерывает распространение stopPropagation.