Watch an event go down and up
On the target itself both listeners run in phase 2, capture first. Click the middle box yourself: which lines disappear?
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
capture listener on outer | phase 1
capture listener on middle | phase 1
capture listener on inner | phase 2
bubble listener on inner | phase 2
bubble listener on middle | phase 3
bubble listener on outer | phase 3