Какие фазы проходят DOM-события в браузере?

Фазы события (Event Phases)

• модель обработки DOM-событий в браузере
• три этапа: capturing, target, bubbling
• capturing: событие распространяется сверху вниз по DOM-иерархии
• target: событие достигает целевого элемента и обрабатывается на нем
• bubbling: событие поднимается от целевого элемента вверх к корню DOM
• для разных фаз можно отдельно назначать обработчики
• определяет последовательность срабатывания слушателей
• необходимо для корректной обработки событий и делегирования

Фазы события составляют основу DOM Event Model и позволяют точно управлять поведением пользовательского интерфейса.

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

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

В веб-разработке браузерные события распространяются по трем основным этапам: фазе захвата (capturing phase), целевой фазе (target phase) и фазе всплытия (bubbling phase). Такой механизм называется Event Propagation и реализован в DOM API.

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

• Фаза захвата (Capturing phase) – событие проходит от корневого элемента документа вниз к целевому элементу. Обработчики на этом этапе применяются нечасто, поскольку стандартное поведение предполагает обработку событий в фазе всплытия.
• Целевая фаза (Target phase) – событие приходит к элементу, для которого оно произошло, после чего запускаются обработчики, непосредственно связанные с этим элементом.
• Фаза всплытия (Bubbling phase) – после обработки целевого элемента событие распространяется по DOM-дереву в обратном направлении, к корневому элементу, последовательно вызывая обработчики родителей. Именно этот этап обычно применяют при делегировании событий.
• В актуальных браузерах обработчики по умолчанию регистрируются для фазы всплытия. Чтобы подписать обработчик на фазу захвата, используют параметр { capture: true }.
• Следует учитывать, что фазу захвата поддерживают не все события: например, события focus и blur не всплывают.

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

При создании сложных интерфейсов часто применяют event delegation в фазе всплытия. Это позволяет сократить число обработчиков. В React 18+ действует синтетическая система событий, которая имитирует эти фазы и упрощает разработку. Управление фазами событий помогает повышать производительность и контролировать поведение интерфейса, особенно в крупных SPA.