Это механизм, при котором, когда на элементе происходит событие, обработчик сначала срабатывает на самом элементе, затем на его родителе, потом на родителе родителя и так далее, вверх по DOM-дереву.

Представьте, что у вас есть вложенные друг в друга элементы: <div> внутри него <p>, внутри <p> находится <span>. Если вы кликнете по <span>, то первым сработает обработчик клика на <span>, затем на <p>, а потом на <div>.

// Пример всплытия событий
const div = document.querySelector('div');
const p = document.querySelector('p');
const span = document.querySelector('span');

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

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

span.addEventListener('click', function() {
  console.log('Клик на span'); // Сработает первым
});

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

// Пример использования всплытия для делегирования событий
const ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
  // Проверяем, является ли целевой элемент listItem
  if (event.target.tagName === 'LI') {
    console.log('Кликнули по элементу списка:', event.target.textContent);
  }
});

Всплытие можно остановить с помощью метода stopPropagation() объекта события.

// Пример остановки всплытия
const button = document.querySelector('button');
const container = document.querySelector('.container');

container.addEventListener('click', function() {
  console.log('Клик на контейнер');
});

button.addEventListener('click', function(event) {
  console.log('Клик на кнопку');
  event.stopPropagation(); // Останавливаем всплытие дальше
});

Что такое всплытие в контексте JavaScript?