Что такое всплытие и погружение событий в DOM

Что проверяют

Знаете ли вы, что фаз три и погружение идёт первым, и понимаете ли, зачем это на практике.

Как отвечать

Событие проходит три фазы:

1. Погружение (capturing): от window вниз через всех предков до целевого элемента;
2. Цель (target): срабатывание на самом элементе;
3. Всплытие (bubbling): обратно вверх до window.

Раньше происходит погружение. Обработчик по умолчанию вешается на всплытие, поэтому в обычном коде фазу погружения не замечают. Включается она третьим аргументом:

el.addEventListener("click", fn, true);          // погружение
el.addEventListener("click", fn, { capture: true });

Что нужно знать дополнительно:

• event.target это элемент, на котором событие возникло, event.currentTarget это элемент, на котором висит текущий обработчик. Внутри обработчика их путают чаще всего;
• stopPropagation останавливает дальнейшее движение по цепочке, но не мешает другим обработчикам на том же элементе. Для них есть stopImmediatePropagation;
• preventDefault отменяет действие браузера по умолчанию (переход по ссылке, отправку формы) и на распространение не влияет вовсе. Это разные вещи, и путать их нельзя;
• всплывают не все события: focus и blur не всплывают, для этого есть focusin и focusout.

Главное практическое применение всплытия это делегирование: один обработчик на контейнере вместо сотни на элементах. Он работает и для элементов, добавленных позже, и экономит память.

Отдельно про React: там события синтетические и вешаются на корень приложения, поэтому stopPropagation внутри React не останавливает обработчик, повешенный напрямую через addEventListener выше по дереву.

Где спотыкаются

Называют всплытие первой фазой.

Путают stopPropagation и preventDefault.

Используют event.currentTarget там, где нужен target, и ломают делегирование.

Вешают обработчик на каждый элемент списка вместо контейнера.