The DOM ForestISSUE #16 of 21

event types · mouse · mousedown · mouseup · wheel

NodetteVSThe Event Bubbler

Nodette saysMouse events — mousedown, mouseup, mousemove, wheel — report position and buttons.

click is mousedown+mouseup on the same element. For finer control use mousedown/mouseup/mousemove, reading clientX/clientY (viewport) or offsetX/offsetY (element-relative). wheel reports scroll deltas. For drag-like interactions, prefer Pointer Events (next lesson) which unify mouse and touch.

Power-ups you unlock

mousedown/up/move and wheel
clientX/Y (viewport) vs offsetX/Y (element)
click = down+up on the same element
Prefer pointer events for drag (unifies input)

The Event Bubbler attacks — common mistakes

Tracking drags with mouse events only (ignores touch)
Confusing client vs offset coordinates
Heavy work in mousemove without throttling

Boss battleTrack the pointer’s position inside a box on mousemove.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="box" style="height:120px;background:#140a28"></div><pre id="o"></pre>
<script>document.getElementById('box').addEventListener('mousemove',e=>document.getElementById('o').textContent='x='+e.offsetX+' y='+e.offsetY);</script></body></html>

▶ Open the interactive comic issue

‹ Event Types · Keyboard · Keydown · Keyup Event Types · Pointer · Touch · Drag ›