Keyboard events: keydown, modifiers, and the Escape key

Three keyboard events

document.addEventListener("keydown",  (e) => { /* key was pressed */ });
document.addEventListener("keypress", (e) => { /* deprecated — don't use */ });
document.addEventListener("keyup",    (e) => { /* key was released */ });

keydown is what you want 95% of the time. It fires once when the key goes down (and repeatedly while held). keypress is deprecated. keyup is only for "did they release this combo before doing X."

event.key vs event.code

e.key   === "Escape"     // what character/name the user got
e.code  === "Escape"     // which physical key, regardless of layout
e.key   === "ArrowUp"
e.key   === "Enter"

Use event.key for "did they press Escape?" — works across keyboard layouts. Use event.code for "did they press the key where WASD is on QWERTY?" — game-style shortcuts that should survive layout swaps.

Modifier keys

if (e.metaKey  && e.key === "k") { /* Cmd+K on Mac */ }
if (e.ctrlKey  && e.key === "k") { /* Ctrl+K elsewhere */ }
if (e.shiftKey && e.key === "Enter") { /* Shift+Enter */ }

e.altKey, e.shiftKey, e.ctrlKey, e.metaKey are booleans on the event. Combine with e.key for shortcuts.

The Escape-to-close pattern

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") dialog.classList.remove("open");
});

Single source of truth for "what does Escape do." Don't sprinkle Escape handlers across components — one place at the document level wins.