Как распространяются события в DOM

Событие проходит три фазы. Сначала погружение: браузер идёт от window вниз по предкам к элементу, где оно возникло. Потом фаза цели. Потом всплытие обратно вверх. Обычные слушатели срабатывают на всплытии, а если передать capture: true, то на погружении. В обработчике event.target это исходный элемент, а currentTarget тот, на котором висит слушатель. stopPropagation прерывает путь события по дереву, при этом остальные слушатели того же элемента ещё выполнятся, а stopImmediatePropagation остановит и их. preventDefault совсем про другое: он отменяет действие браузера, например переход по ссылке или отправку формы, а событие при этом продолжает всплывать. Ещё важно, что всплывают не все события: focus, blur, mouseenter не всплывают, для делегирования фокуса есть focusin и focusout. И я стараюсь не злоупотреблять stopPropagation, потому что он ломает логику, которая слушает выше, например закрытие меню по клику снаружи.