Зачем нужно всплытие события

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

1. Делегировать события — обрабатывать события на родительском элементе для динамически добавляемых дочерних элементов.
2. Упростить управление — один обработчик на родителе вместо множества на дочерних элементах.

Пример делегирования:

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Клик по элементу списка:', e.target.textContent);
  }
});

Можно остановить всплытие через e.stopPropagation(), но злоупотреблять этим не стоит.