Что такое распространение события?

Распространение события (event propagation) — это процесс движения события по дереву DOM через три фазы: погружение, целевую фазу и всплытие.

Три фазы

1. Погружение (capturing) — событие идёт от document вниз к целевому элементу. Обработчики срабатывают при { capture: true }.
2. Цель (target) — событие на самом элементе-источнике.
3. Всплытие (bubbling) — событие поднимается обратно к родителям до document (по умолчанию).

document → parent → target → parent → document
       погружение    ↑      всплытие

parent.addEventListener('click', h, { capture: true }); // погружение
child.addEventListener('click', h);                      // цель
parent.addEventListener('click', h);                     // всплытие

Управление распространением

• stopPropagation() — прервать распространение.
• stopImmediatePropagation() — прервать и не дать другим обработчикам на элементе сработать.

Применение

• Всплытие → делегирование событий (один обработчик на родителе).
• Погружение → ранний перехват.

Коротко для собеседования

Распространение события — движение по DOM через три фазы: capturing (сверху вниз к цели), target (на элементе), bubbling (снизу вверх к родителям, по умолчанию). Всплытие — основа делегирования. Прерывает stopPropagation.