Как работают фазы событий

События в DOM проходят три фазы: захват, цель и всплытие.

1. Захват (Capture) - событие движется от корня документа до целевого элемента. Редко используется, но можно включить через addEventListener с третьим параметром true.

2. Цель (Target) - событие достигло элемента, на котором произошло (например, клик по кнопке).

3. Всплытие (Bubble) - событие поднимается обратно к корню документа. Это поведение по умолчанию.

Пример:

document.querySelector('button').addEventListener('click', (e) => {
  console.log('Target phase');
}, false); // false = bubble (по умолчанию)

document.body.addEventListener('click', (e) => {
  console.log('Bubbling phase');
}, false);

document.body.addEventListener('click', (e) => {
  console.log('Capture phase');
}, true);

Вывод при клике:

1. "Capture phase" (захват)
2. "Target phase" (цель)
3. "Bubbling phase" (всплытие)

Можно остановить всплытие через e.stopPropagation().