stopPropagation versus stopImmediatePropagation
Surprise in the last line: a MouseEvent you construct yourself doesn't bubble either unless you pass { bubbles: true }. Only events the browser fires (and el.click()) set it for you.
An event doesn't only happen on the element you clicked: it travels down the DOM tree from window to the target (capturing), then back up to window (bubbling), and listeners on every ancestor along the way get a turn unless one calls stopPropagation().
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Put a <li> inside a <ul id="menu">. Add a listener on the list that logs eventPhase and the tag name of target. Click the <li> from code.
On a page with <div id="panel"><button id="close">×</button></div>, the panel logs panel clicked and the button logs closed. Make clicking the button log only closed, without calling stopPropagation.
Explain it without notes
Describe the three phases of event propagation.
What is the difference between event.target and event.currentTarget?
What is the difference between stopPropagation, stopImmediatePropagation and preventDefault?
Why is calling stopPropagation often considered a bad idea?
Preview
Console
Nothing logged yet.Expected console output
del: delete the card
del: second listener still runs
---
pin: pinned
---
click bubbles? false | ping bubbles? false