Как повесить Event чтобы он отрабатывал событие на стадии Capturing?

Обработчик на стадии Capturing вешают через `addEventListener` с опцией `{ capture: true }` (или третьим аргументом `true`) — тогда он срабатывает на фазе погружения, до целевой и всплытия.

Как повесить на Capturing

element.addEventListener('click', handler, { capture: true });
// или (старый синтаксис)
element.addEventListener('click', handler, true);

Обработчик сработает на фазе погружения (сверху вниз к цели), а не всплытия.

Фазы события

document → parent → target → parent → document
       погружение    ↑      всплытие
       (capture)            (bubble, по умолчанию)

По умолчанию (false/без опции) обработчик на фазе всплытия. С capture: true — на погружении.

Пример

parent.addEventListener('click', () => console.log('parent capture'), { capture: true });
parent.addEventListener('click', () => console.log('parent bubble'));
child.addEventListener('click', () => console.log('child'));

// Клик по child:
// parent capture → child → parent bubble

Capture-обработчик родителя срабатывает раньше обработчика цели.

Зачем нужно

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

Снятие

При снятии указать ту же опцию:

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

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

Обработчик на стадии Capturing вешают через addEventListener('click', handler, { capture: true }) (или третий аргумент true) — срабатывает на фазе погружения (сверху вниз к цели), раньше целевых и всплывающих. Нужно для раннего перехвата (глобальные шорткаты, блокировка). Снимать с той же опцией capture.