JavaScript Element keydown Event

What You’ll Learn

The keydown event fires when a key is pressed. Learn addEventListener vs onkeydown, key vs code, modifiers, how it differs from keyup / keypress, IME tips, and five try-it labs.

Introduction

Keyboard shortcuts, games, accessible menus, and Escape-to-close dialogs all start with knowing when a key goes down. The keydown event is that signal.

The event target is usually the focused element (an <input>, contenteditable host, button, and so on). If nothing suitable is focused, it may be Document or the root. The event bubbles.

Understanding keydown

An instance event that answers: “Did a key just go down (possibly repeating while held)?”

• Fires when any key is pressed (including modifiers and arrows).
• KeyboardEvent — key, code, modifier flags, repeat, isComposing.
• Handler — onkeydown or addEventListener("keydown", ...).
• Bubbles — can reach Document / Window.
• May repeat while the key is held (event.repeat).
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("keydown", (event) => { });

onkeydown = (event) => { };

Event type

A KeyboardEvent (inherits from UIEvent and Event).

Handy properties

⚖️ keydown vs keyup vs keypress

⚠️ IME Composition & isComposing

During Input Method Editor (IME) composition (common for CJKT text), browsers may fire keydown events that you should ignore for shortcuts. MDN recommends skipping when event.isComposing is true, and also checking the legacy keyCode === 229 marker.

eventTarget.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // handle shortcuts safely
});

Examples Gallery

Examples follow MDN Element: keydown event. Focus a field, then press keys to see events.

const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

 KeyA Enter

const field = document.getElementById("field");
const out = document.getElementById("out");

field.onkeydown = (event) => {
  out.textContent = "key=" + event.key + " code=" + event.code;
};

key=a code=KeyA

const dialog = document.getElementById("dialog");
const out = document.getElementById("out");

document.addEventListener("keydown", (event) => {
  if (event.key !== "Escape") return;
  dialog.hidden = true;
  out.textContent = "Closed with Escape";
});

Closed with Escape

const box = document.getElementById("box");
const stage = document.getElementById("stage");
let x = 20;
let y = 20;

stage.tabIndex = 0; // make stage focusable
stage.focus();

stage.addEventListener("keydown", (event) => {
  const step = 10;
  if (event.key === "ArrowRight") x += step;
  else if (event.key === "ArrowLeft") x -= step;
  else if (event.key === "ArrowDown") y += step;
  else if (event.key === "ArrowUp") y -= step;
  else return;
  event.preventDefault();
  box.style.transform = "translate(" + x + "px," + y + "px)";
});

Box moves with Arrow keys (focus the stage first).

const out = document.getElementById("out");

document.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
    event.preventDefault();
    out.textContent = "Save shortcut handled";
  }
});

Save shortcut handled

🚀 Common Use Cases

• Keyboard shortcuts (Save, Search, Escape to close).
• Games and canvas controls (WASD / arrows).
• Accessible menus and listbox arrow navigation.
• Preventing default browser actions for custom key UX.
• Detecting held keys with event.repeat.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
• Prefer keydown / keyup over deprecated keypress.
• Use key for meaning; use code for physical layout-independent keys.
• Skip IME composition events for shortcuts (isComposing / keyCode === 229).
• Related learning: input, keypress (deprecated), addEventListener(), JavaScript hub.

💡 Best Practices