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 and Step both follow your edits
Loading...
Console
Output will appear here
Visualization
Result
Press Step to watch each line's result appear here
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.