Что такое всплытие событий (Event Bubbling)?nodejs-82

Всплытие событий — это фаза распространения события в DOM, при которой событие последовательно поднимается от целевого элемента вверх по иерархии DOM-дерева к корневому элементу. Это один из трех этапов жизненного цикла события наряду с фазой захвата и целевой фазой.

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

1. Событие возникает на целевом элементе (target)
2. Затем оно последовательно всплывает через всех родителей
3. На каждом уровне могут быть обработчики, которые реагируют на событие

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

document.getElementById('grandparent').addEventListener('click', () => {
  console.log('Grandparent clicked');
});

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('Child clicked');
});

При клике на кнопку вывод в консоли будет:

1. "Child clicked" (целевая фаза)
2. "Parent clicked" (всплытие)
3. "Grandparent clicked" (всплытие)

Ключевые особенности

1. Большинство событий всплывают: click, change, keydown и др.
2. Некоторые события не всплывают: focus, blur, load
3. Порядок обработки: от самого глубокого элемента к корню

Практическое применение

1. Делегирование событий:
   • Один обработчик на родителе для многих дочерних элементов
   • Эффективно для динамически добавляемых элементов

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on item:', event.target.textContent);
  }
});

2. Прекращение всплытия:

event.stopPropagation(); // Останавливает всплытие
event.stopImmediatePropagation(); // + предотвращает вызов других обработчиков на текущем элементе

3. Доступ к целевоиу элементу:
   • event.target — исходный элемент, на котором произошло событие
   • event.currentTarget — текущий элемент, на котором срабатывает обработчик

Отличие от фазы захвата

1. Всплытие — снизу вверх (от target к document)
2. Захват — сверху вниз (от document к target)
3. По умолчанию обработчики срабатывают на фазе всплытия

// Третий параметр определяет фазу:
element.addEventListener('click', handler); // Всплытие (по умолчанию)
element.addEventListener('click', handler, true); // Захват

Особенности в Node.js

Хотя Node.js не имеет DOM, концепция всплытия реализована в:

1. EventEmitter — цепочки событий
2. Middleware цепочки (Express, Koa) — последовательная обработка

Резюмируем:

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