Объясни механизм распространения событий в браузере (Event Propagation)

Компании, где спрашивали

Type

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

sobes.tech AI

Механизм распространения событий в браузере состоит из трёх фаз:

Фаза захвата (Capturing phase) — событие движется сверху вниз по дереву DOM, начиная с корневого элемента (обычно window или document) к целевому элементу.
Целевая фаза (Target phase) — событие достигает целевого элемента, на котором произошло действие.
Фаза всплытия (Bubbling phase) — событие поднимается обратно вверх по дереву DOM от целевого элемента к корню.

Обработчики событий можно назначать с учётом фазы, на которой они срабатывают, передавая третий аргумент в addEventListener:

true — обработчик сработает на фазе захвата.
false (по умолчанию) — на фазе всплытия.

Пример:

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => console.log('Parent capturing'), true); // захват
parent.addEventListener('click', () => console.log('Parent bubbling')); // всплытие
child.addEventListener('click', () => console.log('Child target'));

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

Предыдущий Следующий