Фазы событий в DOM
При клике на элемент событие проходит три фазы.
Три фазы
Capturing: window → document → html → body → button
Target: button
Bubbling: window ← document ← html ← body ← button
Регистрация обработчика
// По умолчанию - фаза bubbling
element.addEventListener("click", handler)
// Фаза capturing (третий параметр true)
element.addEventListener("click", handler, true)
Пример с выводом
document.addEventListener("click", () => console.log("doc capture"), true)
document.body.addEventListener("click", () => console.log("body capture"), true)
document.querySelector("button").addEventListener("click", () => console.log("button"))
document.body.addEventListener("click", () => console.log("body bubble"))
document.addEventListener("click", () => console.log("doc bubble"))
// При клике: doc capture → body capture → button → body bubble → doc bubble
Остановка распространения
e.stopPropagation() // остановить всплытие/погружение
e.stopImmediatePropagation() // + другие обработчики на этом элементе
e.preventDefault() // отменить действие браузера (не останавливает всплытие!)
event.target vs event.currentTarget
document.body.addEventListener("click", (e) => {
e.target // элемент, на котором кликнули
e.currentTarget // body - элемент с обработчиком
})