На какой стадии отрабатывают внешние нецелевые обработчики событий в DOM

Что проверяют

Понимаете ли вы, что фаза срабатывания зависит не от положения элемента в дереве, а от того, как подписан обработчик. Это база для делегирования и для отладки чужих обработчиков, которые срабатывают не вовремя.

Как отвечать

У события три фазы: погружение от window вниз к цели, фаза цели, всплытие обратно наверх. Обработчик на предке, то есть нецелевой, отработает в погружении, если подписан с флагом capture, и во всплытии, если подписан без него: по умолчанию флаг выключен.

list.addEventListener("click", onCapture, { capture: true }); // до цели
list.addEventListener("click", onBubble);                     // после цели

При клике по кнопке внутри списка порядок такой: onCapture, обработчики самой кнопки, onBubble. На самой цели отдельных фаз погружения и всплытия нет, там eventPhase равен AT_TARGET, и обработчики вызываются в порядке подписки, флаг на порядок не влияет.

Практический смысл в делегировании: один обработчик на контейнере вместо сотни на строках, а внутри event.target.closest(...) для фильтрации. Погружение нужно реже, в основном чтобы перехватить событие раньше вложенных обработчиков.

Где спотыкаются

Считают, что нецелевой обработчик это всегда всплытие. Тот же обработчик, подписанный с capture, увидит событие раньше цели, и два обработчика на одном элементе сработают в разных точках прохода.

Путают event.target и event.currentTarget. Первый это элемент, на котором событие возникло, второй это элемент с обработчиком. В делегировании фильтруют по target, а сам обработчик живёт на currentTarget.

Делегируют события, которые до предка не доходят. focus и blur не всплывают, для делегирования берут focusin и focusout, а вместо mouseenter приходится слушать mouseover.