Что такое фаза capturing (перехвата) событий в DOM?

Question

Accepted Answer

## Начнём с основы
Событие в DOM идёт по пути: **capture** (сверху вниз к цели) → target → **bubble** (снизу вверх). Capturing — первая фаза.

## Практика

По умолчанию `addEventListener(type, handler)` слушает на bubbling (`capture: false`). Чтобы слушать на спуске:

```js
parent.addEventListener(
  'click',
  (e) => console.log('capture parent'),
  true, // или { capture: true }
);
```

Нужно, когда предок должен среагировать **до** целевого элемента (например, глобальный перехват до дочерней логики).

`stopPropagation()` останавливает дальнейшее распространение в обе стороны с текущего момента.

## Итог

Capturing — путь от `window`/документа к target. Реже bubbling, но важен для точного контроля порядка обработчиков.

Порядок слушателей: сначала все capture от корня к target, затем target-фаза, затем bubble. Если на одном элементе два слушателя — capture и bubble — при проходе через этот узел сначала сработает capture. Это помогает строить «рамки» вокруг чужого кода на target.