Какие знаешь фазы распространения события?

Фазы распространения событий в DOM

В современной веб-разработке понимание механизма распространения событий (event propagation) критически важно для создания корректно работающих интерактивных интерфейсов. Событие в DOM проходит через три четко определенные фазы, которые образуют полный цикл распространения (event flow).

1. Фаза захвата (Capturing Phase)

Это начальная фаза, когда событие движется от корня документа (window или document) вниз по иерархии DOM к целевому элементу (target element).

• Направление: Сверху вниз (от window -> document -> html -> body -> ... -> целевой элемент).
• Цель: Перехват события на верхних уровнях до того, как оно достигнет конечного элемента.
• Использование: Встречается реже, чем фаза всплытия. Для прослушивания события на этой фазе необходимо третьим параметром в addEventListener передать true или { capture: true }.

// Прослушивание на фазе захвата
document.querySelector('.outer').addEventListener('click', function() {
    console.log('Захват: Outer div');
}, true); // или { capture: true }

2. Фаза цели (Target Phase)

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

• Расположение: Событие находится непосредственно на самом элементе-цели.
• Особенность: На этом этапе не имеет значения, зарегистрирован ли обработчик на фазе захвата или всплытия — он будет вызван в порядке своей регистрации (при условии, что фаза явно не указана). Однако, если у родительских элементов есть обработчики на фазе захвата, они уже были вызваны.

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

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

• Направление: Снизу вверх (от целевого элемента -> ... -> body -> html -> document -> window).
• Цель: Позволяет реализовать делегирование событий (event delegation) — мощный паттерн, при котором один обработчик ставится на родительский элемент для управления событиями от множества дочерних элементов.
• Использование: Обработчики, зарегистрированные без указания фазы или с false, срабатывают на этой фазе.

// Прослушивание на фазе всплытия (по умолчанию)
document.querySelector('.inner').addEventListener('click', function() {
    console.log('Всплытие: Inner div');
}); // capture по умолчанию false

Полный пример цикла

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

<script>
    const els = ['grandparent', 'parent', 'child'];
    els.forEach(elId => {
        const el = document.getElementById(elId);
        // Обработчик на фазе захвата
        el.addEventListener('click', (e) => {
            console.log(`Захват: ${elId}`);
        }, true);
        // Обработчик на фазе всплытия
        el.addEventListener('click', (e) => {
            console.log(`Всплытие: ${elId}`);
        }, false); // false можно опустить
    });
    // При клике на кнопку #child в консоли будет:
    // Захват: grandparent
    // Захват: parent
    // Захват: child (цель, обработчик capture)
    // Всплытие: child (цель, обработчик bubble)
    // Всплытие: parent
    // Всплытие: grandparent
</script>

Управление распространением: stopPropagation() и stopImmediatePropagation()

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

Паттерн делегирования событий

Понимание фазы всплытия открывает дорогу к делегированию событий. Вместо того чтобы вешать сотни обработчиков на каждую кнопку в списке, мы вешаем один на их общего родителя (<ul>).

document.querySelector('#myList').addEventListener('click', function(event) {
    // event.target - это исходный элемент, на котором произошло событие
    if (event.target.tagName === 'BUTTON') {
        console.log('Клик по кнопке с data-id:', event.target.dataset.id);
        // Здесь можно вызвать общую логику для всех кнопок
    }
});

Преимущества делегирования: Экономия памяти, динамическая обработка новых элементов (добавленных после загрузки страницы), упрощение кода.

Итог: Трехфазная модель (Захват -> Цель -> Всплытие) — это фундаментальный механизм DOM, который обеспечивает гибкий и эффективный контроль над поведением событий. Грамотное использование этих фаз, особенно техники делегирования на фазе всплытия, является признаком опытного фронтенд-разработчика и напрямую влияет на производительность и поддерживаемость кода.