Explain DOM event capturing and bubbling with addEventListener
Tests DOM event propagation and addEventListener phase selection. Core: capture moves root-to-target, bubble moves target-to-root, useCapture or options.capture sets it. Red flag: saying events only bubble or confusing stopPropagation with preventDefault.
What's really being asked
This tests whether you understand the full lifecycle of a DOM event and can manipulate it deliberately. Senior engineers need to know propagation order to debug delegated events, avoid double handling, and build robust component layers without leaking listeners everywhere.
The full answer
First, describe the three conceptual zones: the capture phase moves from the window or document root down through ancestors to the event target, the target phase fires on the element itself, and the bubbling phase moves back up from the target to the root. Second, explain that addEventListener registers listeners in the bubbling phase by default, but you can switch to capture by passing true as the third argument or by passing an options object like { capture: true }. Third, mention that most common events bubble, but some like focus, blur, and scroll do not bubble by default, which is why delegation patterns sometimes fail. Fourth, note that event.stopPropagation halts further propagation in the current phase, while event.preventDefault stops the browser's default action, and these are orthogonal concerns.
The mistakes people make
A red flag is claiming that events only bubble and capture is legacy or unused. Another is saying the third argument is exclusively a boolean and ignoring the options object form. Confusing stopPropagation with preventDefault is a classic error. Also, asserting that all events bubble will immediately signal shallow experience.
What usually comes next
An interviewer might ask when you would intentionally use capture phase, such as intercepting events before they reach nested components. They might ask how event delegation works and why it relies on bubbling. They could also probe what happens if a listener calls stopPropagation during capture, or ask about passive listeners and how they interact with preventDefault.
A concrete example
Imagine a modal with a close button inside an overlay. If you attach a click listener to the overlay in bubble phase to close the modal, clicking the close button might trigger both handlers and close the modal twice or reopen it. Using capture phase on the overlay, or checking event.target versus event.currentTarget, lets you control exactly when and how the overlay responds relative to its children.
Interview question
You add a click listener to a parent with addEventListener('click', fn, true). When does fn run relative to a child element's default listener if the child is clicked?
- a.fn and the child listener execute simultaneously on the event target
- b.fn runs after the child listener during event bubbling
- c.fn runs before the child listener during event captureCorrect
- d.fn only runs if the child listener does not call preventDefault
Why? this is the answer
Passing true as the third argument registers the parent listener for the capture phase, which fires as the event travels downward from the root, so it executes before the child's bubble-phase listener. Option B describes the default behavior when the third argument is omitted or false, not capture.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #dom
- #events
- #javascript
- #addEventListener
- #propagation
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on dom — each one lists the topics its interview covers.
See open roles