Для чего нужно всплытие событий?

Всплытие событий нужно, чтобы обрабатывать события потомков на уровне родителя — это основа делегирования событий, экономящего обработчики и работающего с динамическими элементами.

Как работает

Событие, возникнув на элементе, поднимается вверх по дереву к родителям до document. Обработчик на родителе ловит события всех потомков:

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

Зачем нужно — делегирование событий

Один обработчик вместо многих

Вместо навешивания обработчика на каждый элемент — один на родителя:

// Плохо: обработчик на каждую кнопку
buttons.forEach((b) => b.addEventListener('click', handler));
// Хорошо: один на контейнер
container.addEventListener('click', handler);

Работа с динамическими элементами

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

Экономия памяти

Меньше обработчиков → меньше памяти, проще управление.

Свойства для делегирования

• event.target — где событие возникло.
• event.currentTarget — где висит обработчик.
• matches()/closest() — определить нужный элемент.

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

Всплытие нужно для делегирования событий: один обработчик на родителе ловит события всех потомков (через event.target), включая динамически добавленных. Экономит обработчики и память, упрощает управление. Основа обработки событий в списках и динамических интерфейсах.