freecoding.school100% FREE · NO SIGNUP
The Old NetISSUE #46 of 60

event object · target · type · preventDefault

Pixel PeteVSQuirks Mode
Pixel Pete saysThe event object carries details and methods — target, type, preventDefault, stopPropagation.

Handlers receive an event: target (what triggered it), type, coordinates, key info, and modifier flags. preventDefault() cancels the browser's default (e.g. stop a form submitting or a link navigating); stopPropagation() halts bubbling. These two methods are how DHTML took control of user interactions.

Power-ups you unlock

Quirks Mode attacks — common mistakes

Boss battleStop a link from navigating with preventDefault and log its target.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><a id="a" href="https://example.com">don’t navigate</a><p id="o"></p>
<script>document.getElementById('a').addEventListener('click',e=>{e.preventDefault();document.getElementById('o').textContent='blocked navigation to '+e.target.href;});</script></body></html>
▶ Open the interactive comic issue
‹ Event Bubbling · Capturing · DelegationMouse Events · Click · Mousemove · Mouseover ›