Как перехватывать события на фазе погружения?

Как перехватывать события на фазе погружения?

• обработка событий в DOM
• три фазы: погружение (capturing), цель и всплытие
• для перехвата на этапе погружения используется параметр useCapture = true
• addEventListener(type, handler, true) — обработчик, назначенный на фазу погружения
• сначала событие проходит DOM-дерево сверху вниз на фазе погружения
• это удобно для ранней обработки события и предотвращения его всплытия
• подход применяют, чтобы управлять порядком обработки сложных событий

При необходимости могу дополнить ответ подробным разбором и примерами кода.

Подробный ответ

Основной ответ

Перехват событий на фазе погружения (capture phase) в DOM соответствует одному из этапов браузерной модели распространения событий. Сначала событие перемещается от верхних узлов DOM вниз к целевому элементу — это фаза погружения. Затем наступает фаза цели, после чего событие распространяется обратно вверх во время всплытия. Чтобы обработчик срабатывал именно при погружении, при его регистрации в методе { capture: true } необходимо явно задать опцию addEventListener.

Ключевые моменты

• Регистрация addEventListener с параметром capture: В метод addEventListener передают третьим аргументом объект конфигурации либо устаревшее булево значение. Например: js element.addEventListener('click', handler, { capture: true }); — в этом случае обработчик будет вызван на фазе погружения.
• Отличие от фазы всплытия (bubble phase): по умолчанию обработчики выполняются во время всплытия, когда событие поднимается от целевого элемента вверх по DOM-дереву.
• Практическое применение: перехват на этапе capture нужен, когда важно выполнить обработчик раньше обработчиков целевого элемента и фазы всплытия. Такой подход, например, позволяет глобально отменять события или предотвращать конфликты с дочерними элементами.

Практический контекст

В сложных интерфейсах на React 18+ и при использовании vanilla JS нередко применяют capture для глобальной регистрации слушателей. Это позволяет перехватить событие до того, как его обработают вложенные компоненты, и точнее управлять поведением всплывающих меню, drag-n-drop и других интерактивных элементов.