Когда события обычно отлавливаются — на всплытии или на погружении?

Фазы распространения событий

Когда в DOM происходит событие, оно проходит три фазы: погружение (capturing), цель (target) и всплытие (bubbling). На фазе погружения событие движется от корневого элемента (document) вниз к целевому элементу. На фазе всплытия — наоборот, от целевого элемента вверх к корню.

Почему всплытие используется чаще

По умолчанию метод addEventListener устанавливает обработчик на фазу всплытия (третий аргумент false или опущен). Это сделано для удобства: всплытие позволяет реализовать делегирование событий, когда один обработчик на родителе обрабатывает события от множества дочерних элементов. Например, для списка <ul> с сотней <li> можно повесить один обработчик на <ul> и ловить клики по любым <li> через всплытие.

Пример кода

// Обработчик на всплытие (по умолчанию)
document.querySelector('ul').addEventListener('click', (event) => {
  console.log('Клик по', event.target.tagName);
});

// Обработчик на погружение (третий аргумент true)
document.querySelector('ul').addEventListener('click', (event) => {
  console.log('Погружение: клик по', event.target.tagName);
}, true);

Когда применяется погружение

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

Вывод: Всплытие — стандартный и наиболее практичный способ обработки событий в веб-разработке, особенно для делегирования. Погружение применяется в специфических сценариях, где требуется ранний перехват.