Как работает всплытие событий в DOM?

Всплытие событий в DOM (event bubbling) — это механизм, при котором событие, вызванное на любом элементе DOM, переходит на его родительский элемент и продолжает подниматься всё выше, пока не достигнет самого верхнего элемента HTML и не вызовет события, прикреплённые ко всем его родительским элементам. nuancesprog.ru

Когда пользователь совершает действие, браузер ищет самый вложенный элемент, к которому относится событие. doka.guide Затем это событие передаётся родительскому элементу и так далее до самого корня DOM. doka.guide

Пример: если пользователь нажимает кнопку, срабатывает событие, связанное с ней, а затем запускается событие, связанное с её родительским элементом span, который затем запускает p, вновь запускающий событие на div, и далее событие поднимается до HTML. nuancesprog.ru

Такое всплытие по всем родительским элементам позволяет событиям, прикреплённым к дочернему элементу, автоматически становиться доступными для всех родительских элементов, присутствующих в DOM. nuancesprog.ru