The Old NetISSUE #44 of 60

addEventListener · the modern way

Pixel PeteVSQuirks Mode

Pixel Pete saysaddEventListener is the modern way — many handlers, fine control, clean removal.

el.addEventListener("click", fn, options) attaches a handler without overwriting others — you can add several. Remove with removeEventListener (same function reference required). Options like { once: true }, { passive: true }, and { capture: true } tune behavior. This is the standard for all event wiring today.

Power-ups you unlock

Many handlers per event, no overwrite
removeEventListener needs the same fn reference
Options: once, passive, capture
The standard for all event wiring

Quirks Mode attacks — common mistakes

Anonymous fn that can’t be removed later
Re-adding without removing (duplicate handlers)
Forgetting passive:true for scroll/touch perf

Boss battleAttach two click handlers to one button and confirm both fire.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><button id="b">click</button><p id="o"></p>
<script>const o=document.getElementById('o');document.getElementById('b').addEventListener('click',()=>o.textContent+='A');document.getElementById('b').addEventListener('click',()=>o.textContent+='B');</script></body></html>

▶ Open the interactive comic issue

‹ Event Handlers · The Old Onclick Way Event Bubbling · Capturing · Delegation ›