Что такое Bubbling?

Event Bubbling (Всплывание событий)

Bubbling (всплывание) — это механизм в JavaScript, при котором событие, возникшее на одном элементе DOM, распространяется вверх по цепочке родительских элементов. Это третья фаза обработки событий в браузере после фазы захвата (capturing) и фазы обработки на самом элементе (target).

Как это работает

Когда вы кликаете на элемент, событие проходит три фазы:

1. Capturing (захват): Событие идет вниз от корня DOM к целевому элементу
2. Target (цель): Событие обрабатывается на самом элементе
3. Bubbling (всплывание): Событие поднимается вверх от целевого элемента к корню

Пример всплывания

// HTML:
// <div id="parent" onclick="console.log('Parent clicked')">
//   <button id="child" onclick="console.log('Button clicked')">
//     Click me
//   </button>
// </div>

// Результат клика на кнопку:
// 1. Button clicked
// 2. Parent clicked

Даже если кликнуть на кнопку, событие всплывет до родительского div и его обработчик также сработает.

Отключение всплывания

Иногда нужно остановить всплывание события. Для этого используется метод stopPropagation():

const child = document.getElementById('child');
const parent = document.getElementById('parent');

child.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Button clicked');
});

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

// При клике на button:
// Button clicked
// (Parent clicked НЕ выполнится)

Разница между stopPropagation и preventDefault

• stopPropagation() — останавливает всплывание события, но не отменяет действие по умолчанию
• preventDefault() — отменяет действие браузера по умолчанию (например, переход по ссылке), но событие все еще всплывает

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Link clicked but prevented');
});

Capturing vs Bubbling

По умолчанию события обрабатываются в фазе bubbling. Если вы хотите перехватить событие в фазе capturing, передайте третий параметр true:

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('Parent (capturing)');
}, true);

child.addEventListener('click', () => {
  console.log('Child (bubbling)');
}, false);

// Результат при клике на button:
// Parent (capturing)
// Child (bubbling)

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

Благодаря bubbling, мы можем вешать обработчик на родителя и обрабатывать события детей:

const list = document.getElementById('list');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Item clicked: ', event.target.textContent);
  }
});

// HTML:
// <ul id="list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

Это очень полезно для динамически добавляемых элементов — не нужно вешать обработчик на каждый новый элемент.