Что такое всплытие событий в DOM?

Всплытие событий в DOM: механизм распространения

Всплытие событий (Event Bubbling) — это фундаментальный механизм в DOM (Document Object Model), при котором событие, произошедшее на вложенном элементе, последовательно распространяется ("всплывает") вверх по иерархии DOM к его родительским элементам, вплоть до объекта window.

Как работает всплытие?

Представьте такую структуру HTML:

<div id="grandparent">
  <div id="parent">
    <button id="child">Нажми меня</button>
  </div>
</div>

И соответствующий JavaScript:

document.getElementById('grandparent').addEventListener('click', function() {
  console.log('Клик на grandparent');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('Клик на parent');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Клик на child');
});

При клике на кнопку (#child) в консоли появится:

Клик на child
Клик на parent
Клик на grandparent

Событие начинается с самого глубокого элемента (target — исходная цель) и поднимается вверх по цепочке родителей.

Жизненный цикл события в DOM

Полный цикл распространения события состоит из трёх фаз:

1. Фаза захвата (Capture Phase) — событие движется сверху вниз, от window до целевого элемента.
2. Фаза цели (Target Phase) — событие достигло целевого элемента (event.target).
3. Фаза всплытия (Bubbling Phase) — событие поднимается обратно вверх по иерархии.

По умолчанию обработчики, добавленные через addEventListener, срабатывают на фазе всплытия. Чтобы слушать событие на фазе захвата, нужно передать третий аргумент true:

element.addEventListener('click', handler, true); // Фаза захвата
// или { capture: true }
element.addEventListener('click', handler, { capture: true });

Практическое значение и управление

Делегирование событий — ключевой паттерн, основанный на всплытии. Вместо навешивания обработчиков на множество дочерних элементов, мы вешаем один обработчик на общего родителя:

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Кликнут элемент списка:', event.target.textContent);
  }
});

Это эффективно для динамически добавляемых элементов и экономит память.

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

• event.stopPropagation() — останавливает дальнейшее распространение события (всплытие или захват).

  child.addEventListener('click', function(event) {
    console.log('Child clicked');
    event.stopPropagation(); // parent и grandparent не получат событие
  });
  

• event.stopImmediatePropagation() — останавливает всплытие И предотвращает вызов других обработчиков на текущем элементе.
• event.preventDefault() — отменяет стандартное действие браузера (например, переход по ссылке), но не останавливает всплытие.

Исключения из правила

Не все события всплывают. События focus, blur, load, unload, mouseenter, mouseleave не всплывают. Для них используется механизм захвата или альтернативные события (focusin/focusout всплывают).

Почему это важно?

Понимание всплытия критически важно для:

• Оптимизации производительности через делегирование событий.
• Предотвращения неожиданного поведения из-за множественных срабатываний.
• Грамотного управления потоком событий в сложных интерфейсах.
• Правильной отладки интерактивности.

Этот механизм, наряду с фазой захвата, образует мощную модель обработки событий в DOM, позволяющую создавать как точечные, так и глобальные реакции на действия пользователя.