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

Question

События в DOM проходят три фазы: capturing, target и bubbling. В фазе capturing событие сначала проходит сверху вниз по дереву DOM. Чтобы обработчик сработал на этой фазе, нужно передать параметр capture: true в addEventListener.

YeaHub · Accepted Answer

Система событий в браузере основана на распространении события по дереву DOM.Фазы событияCapturing phaseСобытие идет от window к целевому элементу.Target phaseСрабатывает обработчик целевого элемента.Bubbling phaseСобытие поднимается обратно вверх.Как подписаться на capturingelement.addEventListener("click", handler, { capture: true });
Когда используется capturingглобальные обработчикиперехват событий до bubblingсложные UI-компонентыПочему чаще используют bubblingпроще логикаменьше неожиданного поведенияВыводCapturing — это первая фаза распространения события, которая используется реже, но полезна для перехвата событий до их обработки другими элементами.