freecoding.school › JS DOM & Events › JS Events › lesson 15The DOM Forest ISSUE #15 of 21
event types · keyboard · keydown · keyup NodetteVS The Event Bubbler
Nodette says Keyboard events — keydown and keyup — report which key via event.key and event.code.
keydown fires as a key goes down (repeats while held); keyup on release. event.key is the character/name ("a", "Enter", "ArrowUp"); event.code is the physical key ("KeyA") regardless of layout. Use key for typing, code for game controls. Check modifiers with event.shiftKey etc.
Power-ups you unlock keydown (repeats) vs keyup (release) event.key = character/name · event.code = physical key Modifiers: shiftKey, ctrlKey, altKey, metaKey key for typing, code for game movement The Event Bubbler attacks — common mistakes Using the deprecated keyCode Confusing key (layout) with code (physical) Not calling preventDefault for handled shortcuts Boss battle Show the pressed key and whether Shift was held on keydown.
Example code <!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><input id="i" placeholder="press keys"><pre id="o"></pre>
<script>document.getElementById('i').addEventListener('keydown',e=>document.getElementById('o').textContent='key='+e.key+' shift='+e.shiftKey);</script></body></html>▶ Open the interactive comic issue All 21 adventure lanes Issue #15 of JS DOM & Events freecoding.school . No signup, no ads, no paywall.