Как работает перехват (capturing) событий в DOM?

Система событий в браузере основана на распространении события по дереву DOM.

Фазы события

1. Capturing phase
   Событие идет от window к целевому элементу.

2. Target phase
   Срабатывает обработчик целевого элемента.

3. Bubbling phase
   Событие поднимается обратно вверх.

Как подписаться на capturing

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

Когда используется capturing

• глобальные обработчики

• перехват событий до bubbling

• сложные UI-компоненты

Почему чаще используют bubbling

• проще логика

• меньше неожиданного поведения

Вывод

Capturing — это первая фаза распространения события, которая используется реже, но полезна для перехвата событий до их обработки другими элементами.