Что такое event bubbling и capturing?

Понимание механизмов распространения событий в браузерном окружении критически важно для эффективной работы с пользовательским вводом в JavaScript. Когда какое-либо событие, например клик мышкой, происходит на элементе, браузер запускает процесс прохождения события по всему дереву DOM, который состоит из двух последовательных фаз: погружения и всплытия.

Первая фаза называется capturing или погружение. В этот момент событие начинает свой путь от корневого объекта window вниз через все промежуточные родительские элементы прямо к целевому элементу, на котором произошло действие. По умолчанию слушатели событий на этой фазе не срабатывают, однако разработчик может явно указать браузеру перехватывать события на этапе погружения. Для этого при регистрации обработчика через метод addEventListener в качестве третьего аргумента передается логическое значение true или объект с опцией capture: true.

Вторая и основная фаза называется bubbling или всплытие. Она наступает сразу после того, как событие достигло целевого элемента. На этом этапе событие начинает двигаться в обратном направлении — от целевого элемента вверх к его родителям, поднимаясь вплоть до объекта document и window. По умолчанию все стандартные события в JavaScript работают именно в режиме всплытия, что позволяет обрабатывать действия на более высоких уровнях иерархии.

Для управления этим процессом предусмотрены специальные инструменты. Например, метод event.stopPropagation(), вызванный внутри обработчика событий, полностью останавливает дальнейшее распространение события вверх или вниз по дереву DOM, предотвращая срабатывание аналогичных обработчиков на родительских элементах. Это бывает необходимо в сложных интерфейсах, когда клик по дочерней кнопке не должен вызывать клик по окружающей её карточке.