В JavaScript распространение событий включает две фазы: фазу захвата и фазу всплытия. Эти фазы определяют порядок, в котором срабатывают обработчики событий, когда событие происходит во вложенном элементе DOM. Давайте рассмотрим каждый этап на примере:
Фаза всплытия. На этапе всплывания событие начинается с целевого элемента, который инициировал событие, а затем распространяется через его родительские элементы в дереве DOM. Обработчики событий родительских элементов вызываются по порядку от целевого элемента до корня документа.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">Click me!</div>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer Div Clicked');
});
document.getElementById('middle').addEventListener('click', () => {
console.log('Middle Div Clicked');
});
document.getElementById('inner').addEventListener('click', () => {
console.log('Inner Div Clicked');
});
</script>
</body>
</html>
Если вы нажмете «Inner Div», вы увидите следующий вывод в консоли:
Inner Div Clicked Middle Div Clicked Outer Div Clicked
Это связано с тем, что событие щелчка сначала срабатывает на самом внутреннем элементе, а затем распространяется на внешние элементы в порядке вложенности.
Фаза захвата. На этапе захвата событие перемещается вниз по дереву DOM от корневого элемента к целевому элементу. Эта фаза используется реже, чем фаза барботирования.
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer Div Clicked - Capturing');
}, true); // true indicates capturing phase
document.getElementById('middle').addEventListener('click', () => {
console.log('Middle Div Clicked - Capturing');
}, true);
document.getElementById('inner').addEventListener('click', () => {
console.log('Inner Div Clicked - Capturing');
}, true);
При наличии обработчиков фазы захвата нажатие на «Inner Div» приведет к следующему выводу:
Outer Div Clicked - Capturing Middle Div Clicked - Capturing Inner Div Clicked - Capturing
Фазу захвата можно установить, передав true в качестве третьего аргумента функции addEventListener. По умолчанию прослушиватели событий находятся на этапе воспламенения.
Фазы всплытия и захвата являются частью модели распространения событий в DOM, и их понимание помогает вам контролировать обработку событий в ваших веб-приложениях.
