Что такое всплытие и погружение событий? Как отменить всплытие?

Всплытие (bubbling) и погружение (capturing) — это два этапа распространения событий в DOM.

• Погружение (capturing) — событие сначала проходит от корня документа вниз к целевому элементу.
• Всплытие (bubbling) — после достижения целевого элемента событие поднимается обратно вверх по иерархии DOM к корню.

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

Чтобы отменить всплытие события и предотвратить его дальнейшее распространение вверх по DOM, используется метод event.stopPropagation().

Пример:

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