Какие знаешь фазы DOM Events?

Фазы событий DOM: погружение, целевая фаза и всплытие

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

1. Фаза погружения (Capture Phase)

Событие начинает свой путь от корневого элемента (window или document) и движется вниз по иерархии DOM к целевому элементу (target). На этой фазе срабатывают обработчики, зарегистрированные с опцией capture: true.

// Регистрация обработчика на фазе погружения
document.getElementById('parent').addEventListener('click', function() {
    console.log('Захват: родитель');
}, true); // Третий аргумент true включает фазу захвата

document.getElementById('child').addEventListener('click', function() {
    console.log('Захват: потомок');
}, true);

2. Целевая фаза (Target Phase)

Событие достигает целевого элемента, на котором оно произошло (например, кнопки, на которую кликнули). Здесь выполняются все обработчики, привязанные к этому элементу, независимо от того, зарегистрированы они на захват или всплытие.

// Обработчик на целевом элементе
document.getElementById('targetButton').addEventListener('click', function(event) {
    console.log('Целевая фаза: кнопка');
    console.log('Целевой элемент:', event.target); // Элемент, вызвавший событие
    console.log('Текущий элемент:', event.currentTarget); // Элемент с обработчиком
});

3. Фаза всплытия (Bubble Phase)

После целевой фазы событие поднимается обратно вверх по дереву DOM к корневому элементу. Это поведение по умолчанию для большинства событий (кроме некоторых, например, focus).

// Обработчики на фазе всплытия (по умолчанию)
document.getElementById('parent').addEventListener('click', function() {
    console.log('Всплытие: родитель');
}); // Третий аргумент опущен или false

document.getElementById('grandparent').addEventListener('click', function() {
    console.log('Всплытие: предок');
});

Практический пример и последовательность вызовов

Рассмотрим структуру:

<div id="grandparent">
    <div id="parent">
        <button id="child">Кликни</button>
    </div>
</div>

При клике на кнопку с правильной регистрацией обработчиков вывод будет:

Захват: grandparent
Захват: parent
Целевая фаза: child
Всплытие: parent
Всплытие: grandparent

Управление распространением событий

В обработчиках можно использовать методы объекта события для контроля потока:

• event.stopPropagation() — останавливает дальнейшее распространение события на текущей фазе.
• event.stopImmediatePropagation() — останавливает распространение и предотвращает вызов других обработчиков на этом же элементе.
• event.preventDefault() — отменяет стандартное действие браузера (например, переход по ссылке).

document.getElementById('parent').addEventListener('click', function(event) {
    console.log('Этот обработчик сработает');
    event.stopPropagation(); // Остановит всплытие дальше
}, true);

document.getElementById('grandparent').addEventListener('click', function() {
    console.log('Этот обработчик НЕ сработает из-за stopPropagation');
}, true);

Важные нюансы и лучшие практики

1. Не все события всплывают — события focus, blur, load, unload, mouseenter, mouseleave не всплывают.
2. Делегирование событий — использование всплытия позволяет эффективно обрабатывать события на многих элементах через одного общего предка.
3. Порядок выполнения — на одном элементе обработчики фазы захвата выполняются до обработчиков фазы всплытия, но порядок среди обработчиков одной фазы соответствует порядку их регистрации.
4. Современный подход — в большинстве случаев достаточно использовать фазу всплытия, но понимание захвата необходимо для сложных сценариев и отладки.

Понимание трех фаз событий DOM — фундаментальный навык frontend-разработчика, позволяющий создавать предсказуемую, эффективную и поддерживаемую логику взаимодействия в веб-приложениях.