CodePark/ questions / DOM & events
START PRACTICINGPRACTICE
Frontend question · JavaScript › DOM & events

The user clicks the button, which is inside outer. In what order do the logs appear?

outer.addEventListener("click", () => console.log("outer bubble"));
button.addEventListener("click", () => console.log("button"));
outer.addEventListener("click", () => console.log("outer capture"), true);
outer capture, button, outer bubble

The answer is "outer capture, button, outer bubble". The order in which you register listeners does not matter across phases.
• First, the event goes down in the capture phase. The capturing listener on outer runs.
• Then it reaches the target, button.
• Then it bubbles back up to the normal listener on outer.

The tempting option "button, outer bubble, outer capture" is wrong because it follows the registration order. The capture phase always comes first.