PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Как заканчивается распространение события?

DOM и браузер

Распространение события заканчивается, когда оно завершает всплытие на `document`/`window`, либо когда его прерывают методом `stopPropagation()`.

Естественное завершение

Событие проходит фазы: погружение → цель → всплытие. Всплытие поднимается до самого верха (document, затем window) и там заканчивается:

цель → parent → ... → document → window (конец)

После этого событие «отработано».

Досрочное прерывание

stopPropagation()

Останавливает распространение на текущем элементе — дальше событие не идёт:

element.addEventListener('click', (e) => {
  e.stopPropagation(); // распространение прекращается здесь
});
// родители не получат событие

stopImmediatePropagation()

Останавливает распространение и отменяет другие обработчики того же события на текущем элементе.

Что НЕ прекращает распространение

  • preventDefault() — отменяет действие браузера, но событие продолжает всплывать.

Некоторые события не всплывают

focus, blur, scroll (у элемента) не всплывают: фаза погружения у них есть, а всплытия нет (для делегирования используют focusin/focusout или обработчик с capture: true).

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

Распространение события заканчивается естественно, когда всплытие доходит до document/window, либо досрочно при вызове stopPropagation() (прерывает дальнейшее движение) / stopImmediatePropagation() (плюс отменяет другие обработчики элемента). preventDefault не останавливает распространение (только действие браузера). События focus/blur/scroll не всплывают.

Другие вопросы раздела