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.