The Old NetISSUE #45 of 60

event bubbling · capturing · delegation

Pixel PeteVSQuirks Mode

Pixel Pete saysEvents bubble up the tree; delegation handles many children with one parent listener.

A click fires on the target, then bubbles up through ancestors (capturing runs top-down first). Delegation puts one listener on a parent and inspects event.target to handle any child — efficient, and it works for elements added later. It's the pattern behind dynamic lists and was a DHTML staple long before frameworks.

Power-ups you unlock

Events bubble child → ancestors
Capturing phase runs top → down first
Delegation: one parent listener, check target
Handles dynamically-added elements

Quirks Mode attacks — common mistakes

A listener per item instead of delegation
Forgetting the target check in the parent handler
stopPropagation breaking other delegated handlers

Boss battleHandle clicks on any <li> with one listener on the <ul> via delegation.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><ul id="l"><li>a</li><li>b</li><li>c</li></ul><p id="o"></p>
<script>document.getElementById('l').addEventListener('click',e=>{if(e.target.tagName==='LI')document.getElementById('o').textContent='clicked '+e.target.textContent;});</script></body></html>

▶ Open the interactive comic issue

‹ AddEventListener · The Modern Way Event Object · Target · Type · PreventDefault ›