foundation

Event propagation

Рассуждайте о фазах capture, target и bubble, действиях по умолчанию, отмене, passive listeners и composed paths.

События браузера обычно проходят фазы capture, target и bubble. Слушатели могут наблюдать разные фазы, останавливать распространение, отменять действие по умолчанию при cancelable и использовать passive mode, обещая не блокировать прокрутку. Shadow DOM меняет видимый путь через composed events.

					element.addEventListener('click', handler, { capture: true });
// capture → target → bubble; event.eventPhase помогает отладить порядок
				

`stopPropagation` ограничивает, кто ещё услышит событие; `preventDefault` отменяет действие по умолчанию только при `event.cancelable === true`. Passive-слушатели игнорируют preventDefault ради производительности scroll.

На интервью: объясните точный порядок обработчиков и разницу между остановкой propagation и отменой действия по умолчанию.

Типовые ошибки: preventDefault на non-cancelable или passive ничего не даёт; частый stopPropagation ломает композицию.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

  • Знайте порядок capture, target и bubble.
  • Проверяйте cancelable до preventDefault.
  • Passive для scroll/touch, если не отменяете действие.
  • Учитывайте composed paths в shadow DOM.