Чем отличаются фазы распространения событий и что происходит на каждой фазе?

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

Три фазы

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

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

2. Цель (target)

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

3. Всплытие (bubbling)

Событие поднимается обратно вверх к родителям до document. Большинство обработчиков (по умолчанию) работают на этой фазе.

// Фаза погружения
parent.addEventListener('click', handler, { capture: true });
// Фаза всплытия (по умолчанию)
parent.addEventListener('click', handler);

Порядок выполнения

document → ... → parent → target (цель) → parent → ... → document
        погружение          ↑           всплытие

Что происходит на каждой фазе

• Можно перехватить событие раньше (capture) или позже (bubble).
• event.eventPhase показывает текущую фазу (1/2/3).
• stopPropagation() прерывает дальнейшее распространение на любой фазе.

Практика

• Всплытие → делегирование событий.
• Погружение → перехватить событие до дочерних обработчиков.

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

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