Click an element inside another element, and more than one click handler may run. Which one runs first? Event capturing handles the event on its way down the DOM hierarchy: from the top element toward the element that was clicked, called the target. section 13.3.1
The browser handles propagation in two phases:
- Capturing travels down toward the target. A handler registered with true as the third addEventListener argument runs in this phase. section 13.3.1
- Bubbling travels back up from the target. A handler registered with false—or without a third argument—uses this default phase. section 13.3.1
One click, mixed handler settings
Suppose an inner element sits inside an outer element. Register the outer element’s click handler with true, but leave the inner element’s and document’s handlers at their bubbling settings. A click on the inner element runs the outer handler during capture, then the inner handler, then the document handler during bubbling. The third argument changes when a handler runs; it does not change which element was clicked. section 13.3.1
Need to distinguish the clicked element from the handler’s element? In a handler, event.target identifies where the event occurred; this refers to the element on which that handler was registered. They can differ when an event propagates to another element’s handler. section 13.3.1 section 13.3
Listing 13.8. Capturing versus bubbling
const outerContainer = document.getElementById("outerContainer");
const innerContainer = document.getElementById("innerContainer");
document.addEventListener("click", () => {
report("Document click");
}); #A
outerContainer.addEventListener("click", () => {
report("Outer container click");
}, true); #B
innerContainer.addEventListener("click", () => {
report("Inner container click");
}, false); #C
Compare the third argument on each listener to see which handlers run during capture and which use bubbling. section 13.3.1
