The DOM ForestISSUE #12 of 21

event object · target · currentTarget

NodetteVSThe Event Bubbler

Nodette saysThe event object carries details — target, type, coordinates — and methods to control it.

Every handler receives an event. event.target is the element that triggered it; event.currentTarget is the one the listener is on (they differ with delegation). event.type, event.key, and coordinates live here too. preventDefault() stops default behavior; stopPropagation() halts bubbling.

Power-ups you unlock

event.target = what triggered it
event.currentTarget = the listener’s element
preventDefault() stops default behavior
stopPropagation() halts bubbling

The Event Bubbler attacks — common mistakes

Confusing target with currentTarget
Calling preventDefault when you meant stopPropagation
Forgetting the handler receives the event arg

Boss battleLog event.target vs event.currentTarget when clicking a nested element.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="box" style="padding:20px;background:#140a28"><button>inner</button></div><pre id="o"></pre>
<script>document.getElementById('box').addEventListener('click',e=>{document.getElementById('o').textContent='target='+e.target.tagName+' currentTarget='+e.currentTarget.id;});</script></body></html>

▶ Open the interactive comic issue

‹ Events · AddEventListener · RemoveEventListener Event Bubbling · Capturing · Delegation ›