Какие стадии события важны на практике и как их применять?

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

Три стадии

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

Событие идёт от document вниз к целевому элементу:

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

• Применение: перехватить событие до дочерних обработчиков (глобальные шорткаты, блокировка).

2. Целевая (target)

Событие на самом элементе-источнике (event.target).

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

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

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

• Применение: делегирование — один обработчик на родителе для всех потомков.

Порядок

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

Как применять

Делегирование (всплытие)

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

Один обработчик обслуживает всех потомков, включая динамических.

Ранний перехват (погружение)

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

Управление

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

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

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