Async & Browser JS / Events
Events, Bubbling & Delegation
An event fires on one element, then travels — down first, then back up through its ancestors.
When you click a button, the event doesn't just fire on the button. It first travels down from `window` to the target (the capturing phase), then bubbles back up from the target through every ancestor (the bubbling phase). Event delegation exploits this: instead of attaching a listener to every child, attach one listener to a shared parent and check which child triggered it — since the event bubbles up to the parent regardless.
Codeeditable — Run executes your edits
Loading...
Console
Output will appear here
Visualization
State
Step through — the console panel shows what's happening
Why?
The listener sits on the parent #list, but because click events bubble upward through every ancestor, a click on any child inside it still triggers this one shared handler.