JavaScript Element keydown Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word KEYDOWN

Definition

In JavaScript, the keydown event fires when a key is pressed (MDN). Unlike the Deprecated keypress event, it fires for all keys — whether or not they produce a character.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for keydown. Start with this line.

JavaScript
element.addEventListener("keydown", (event) => { … })
CallWhat it does
element.addEventListener("keydown", (event) => { … })Primary signature.

Built into the browser. Listen with el.addEventListener("keydown", …) — no import required.

Library declarations
JavaScript
element.addEventListener("keydown", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "keydown"
Handler propOptional. onkeydown

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log code (MDN)

Append each physical key id while typing in an input.

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

input.addEventListener("keydown", logKey);

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

How It Works

  1. Focus the field. Key events target the focused element.
  2. Listen for keydown. Fires for every key, including Enter.
  3. Read code. Physical key id like KeyA.
  4. Append to a log. Easy way to study which keys fire.

Example 2 — Simple Shortcut

Run an action when the user presses Enter (or Ctrl/Cmd+S pattern).

JavaScript
const field = document.querySelector("input");

field.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("submit:", field.value);
  }

  if (event.code === "KeyS" && (event.ctrlKey || event.metaKey)) {
    event.preventDefault();
    console.log("save shortcut");
  }
});
Try It Yourself

How It Works

  1. Use key for meaning. "Enter" is clear and layout-friendly.
  2. Use code for physical shortcuts. KeyS stays on the S key.
  3. Check modifiers. ctrlKey / metaKey for Ctrl/Cmd.
  4. Prevent defaults carefully. Only when you truly override browser behavior.

Example 3 — Skip IME Composition (MDN)

Ignore keydowns that belong to an input method editor session.

JavaScript
const field = document.querySelector("input");

field.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  console.log(event.key);
});
Try It Yourself

How It Works

  1. Check isComposing. True while an IME session is active.
  2. Also check 229. MDN: legacy marker for IME-processed keys.
  3. Return early. Avoid treating composition keys as shortcuts.
  4. Why it matters. Improves compatibility for CJKT text input.
Compatibility

Browser Support

Element keydown is Baseline Widely available (MDN: since July 2015). Safe for shortcuts and keyboard UX in modern and older evergreen browsers.

✓ Baseline · Widely available

Element keydown

KeyboardEvent when a key is pressed — long-established across browsers.

99% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
keydown Baseline

Bottom line: Prefer keydown/keyup over keypress. Use key for meaning, code for physical shortcuts, and filter IME composition when needed.

Frequently Asked Questions

It fires when a key is pressed. Unlike the deprecated keypress event, keydown fires for all keys — whether or not they produce a character (MDN).
No. MDN marks Element keydown as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. (keypress is the deprecated relative.)
A KeyboardEvent. Useful properties include key, code, altKey, ctrlKey, shiftKey, metaKey, repeat, and isComposing.
key is the produced value (for example "a" or "Enter"), considering layout and Shift. code is the physical key position (for example "KeyA"), which stays stable across layouts.
keydown fires when the key goes down (and may repeat while held). keyup fires when the key is released.
MDN: skip when event.isComposing is true, and also when event.keyCode === 229 (legacy IME marker), for better CJKT compatibility.

Next: keypress

Learn why keypress is deprecated and what to use instead.

keypress tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element input Event JavaScript Element keypress Event