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

Всплытие события (event bubbling) — это фаза распространения события, при которой оно, возникнув на целевом элементе, поднимается вверх по дереву DOM к родителям вплоть до document.

Три фазы события

1. Погружение (capturing) — от document вниз к цели.
2. Цель (target) — событие на самом элементе.
3. Всплытие (bubbling) — от цели вверх к родителям.

По умолчанию обработчики срабатывают на фазе всплытия.

document.body.addEventListener('click', () => console.log('body'));
button.addEventListener('click', () => console.log('button'));
// Клик по кнопке: 'button', затем 'body' — всплытие

Делегирование событий

Всплытие позволяет повесить один обработчик на родителя вместо множества на детей:

list.addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    console.log('Клик по:', e.target.textContent);
  }
});

Плюсы: меньше обработчиков, работает для динамически добавленных элементов.

Полезные свойства/методы

• event.target — где событие возникло.
• event.currentTarget — где висит обработчик.
• event.stopPropagation() — остановить всплытие.

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

Всплытие — событие поднимается от целевого элемента к родителям до document. На нём основано делегирование: один обработчик на контейнере обслуживает всех потомков, включая добавленных позже. Остановка — stopPropagation().