The Old NetISSUE #43 of 60

event handlers · the old onclick way

Pixel PeteVSQuirks Mode

Pixel Pete saysThe old way to handle events was inline onclick attributes or el.onclick properties.

Early DHTML wired events two ways: inline (<button onclick="go()">) or via the property (el.onclick = fn). Both work but allow only one handler per event — assigning a new onclick overwrites the old. They also mix behavior into markup. They were superseded by addEventListener, which allows many handlers.

Power-ups you unlock

Inline onclick="…" or el.onclick = fn
Only one handler per event
New assignment overwrites the old
Mixes behavior into markup

Quirks Mode attacks — common mistakes

Inline handlers scattering JS through HTML
Overwriting an existing onclick by accident
Expecting multiple onclick assignments to stack

Boss battleWire a click with el.onclick, then note why a second assignment replaces it.

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>document.getElementById('b').onclick=()=>document.getElementById('o').textContent='handled (one handler max)';</script></body></html>

▶ Open the interactive comic issue

‹ SetAttribute · GetAttribute · RemoveAttribute AddEventListener · The Modern Way ›