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

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

Фазы

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

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

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

2. Цель (target)

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

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

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

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

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

• Capturing — можно перехватить событие до дочерних обработчиков.
• Target — обработка на самом элементе.
• Bubbling — родители узнают о событии; основа делегирования.

Управление

• event.eventPhase — текущая фаза (1/2/3).
• event.stopPropagation() — прервать распространение.
• event.target — источник; event.currentTarget — где обработчик.

Практика

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

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

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