DOM-события

Какие фазы проходит DOM-событие?

document
  └── html
        └── body
              └── div.container
                    └── button  ← target

1. Capturing — событие идёт сверху вниз: document → button.
2. Target — обработчики на целевом элементе.
3. Bubbling — событие поднимается обратно: button → document.

addEventListener('click', handler, true) — третий аргумент true включает capturing.

---

Что такое capturing и bubbling?

Bubbling (по умолчанию):

button.addEventListener('click', handler); // bubbling

Capturing:

button.addEventListener('click', handler, true); // capturing

Делегирование событий — популярный паттерн на bubbling:

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') { /* обработка */ }
});

Один обработчик на родителе вместо обработчика на каждом <li>.

---

Что делает stopPropagation()?

button.addEventListener('click', (e) => {
  e.stopPropagation(); // событие не пойдёт к родителям
});

Метод	Что делает
stopPropagation()	Останавливает всплытие
stopImmediatePropagation()	Останавливает всплытие + другие обработчики на этом элементе
preventDefault()	Отменяет действие браузера по умолчанию (submit, переход по ссылке)

---

Когда использовать capturing, а когда bubbling?

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

Bubbling — делегирование событий, логика на родителе. 95% случаев — bubbling.

---

Чем отличаются mouseenter/mouseleave от mouseover/mouseout?

Все четыре генерируются, когда курсор переходит на элемент или покидает его, но:

	mouseover/mouseout	mouseenter/mouseleave
Переходы на потомков и с них	считаются (срабатывают)	не считаются
Всплытие (bubbling)	всплывают	не всплывают

Поэтому mouseenter/mouseleave удобны, когда нужно отслеживать вход/выход только для самого элемента, игнорируя его дочерние элементы.