Объясните фазы событий в браузере

Когда мы говорим о событиях в браузере, важно понимать, что они проходят через несколько фаз, прежде чем достичь целевого элемента. Эти фазы обычно делятся на три основных этапа: захват (capture), целевая фаза (target) и всплытие (bubble). Рассмотрим каждую из них более подробно.

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

На первом этапе события покидают корневой элемент DOM и двигаются к целевому элементу. На этой фазе событие "захватывается" верхними элементами (родителями) и проходит через весь иерархический путь до целевого элемента.

Пример:

document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked (capture phase)");
}, true); // true указывает на захват

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked (capture phase)");
}, true);

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

Когда событие достигает целевого элемента, оно выполняет все обработчики событий, которые были добавлены к этому элементу. Это происходит только в целевой фазе.

Пример:

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked (target phase)");
});

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

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

Пример:

document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked (bubble phase)");
}); // Обработчик при всплытии

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked (bubble phase)");
});

Как это работает в практике

Допустим, у нас есть HTML, который выглядит следующим образом:

<div id="parent">
    <button id="child">Click me!</button>
</div>

Если вы кликнете по кнопке "Click me!", вы получите следующий вывод в консоли:

Parent clicked (capture phase)
Child clicked (target phase)
Child clicked (bubble phase)
Parent clicked (bubble phase)

Заключение

Знание фаз событий поможет вам более эффективно работать с обработкой событий в JavaScript и делать ваш код более предсказуемым. Понимание захвата, целевой фазы и всплытия - это важная часть разработки интерфейсов, потому что оно влияет на то, как события обрабатываются в вашем приложении.