The DOM ForestISSUE #13 of 21

event bubbling · capturing · delegation

NodetteVSThe Event Bubbler

Nodette saysEvents bubble up the DOM tree — delegation uses this to handle many children with one listener.

A click on a child fires on it, then "bubbles" up through ancestors (capturing goes the other way first). Event delegation exploits this: put one listener on a parent and check event.target to handle any child — even ones added later. It's efficient and the standard pattern for lists and dynamic UIs.

Power-ups you unlock

Events bubble child → ancestors
Capturing phase runs top → down first
Delegation: one parent listener for many children
Works for dynamically-added elements too

The Event Bubbler attacks — common mistakes

A listener per item instead of one delegated parent
Forgetting delegation needs a target check
stopPropagation breaking unrelated delegated handlers

Boss battleHandle clicks on any list item with a single listener on the <ul> using delegation.

Example code

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

▶ Open the interactive comic issue

‹ Event Object · Target · CurrentTarget Event Types · Click · Input · Change · Submit ›