keyCode vs key vs code

event.key (Recommended)

Returns the value of the key pressed by the user.

What it returns:

• Character keys: "a", "b", "1", "2", etc.
• Special keys: "Enter", "Escape", "Tab", "ArrowUp"
• Modifier keys: "Shift", "Control", "Alt"
• Accounts for keyboard layout and modifiers

Example Usage

// Example: Detect Enter key
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter pressed!');
  }
});

// Example: Detect any letter 'a' (works with Caps Lock)
if (e.key === 'a' || e.key === 'A') {
  console.log('Letter A pressed');
}

event.code (Recommended)

Returns the physical key code on the keyboard, regardless of layout or modifiers.

What it returns:

• Physical key position: "KeyA", "KeyB", "Digit1", "Digit2"
• Arrow keys: "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"
• Special keys: "Enter", "Space", "Backspace"
• Does NOT change with keyboard layout or modifiers

Example Usage

// Example: Game controls (WASD)
document.addEventListener('keydown', (e) => {
  if (e.code === 'KeyW') console.log('Move forward');
  if (e.code === 'KeyA') console.log('Move left');
  if (e.code === 'KeyS') console.log('Move backward');
  if (e.code === 'KeyD') console.log('Move right');
});

// Always detects the same physical key
// Even on AZERTY or other keyboard layouts

event.keyCode (Deprecated)

Returns a numeric code for the key pressed. This property is deprecated and should not be used in new code.

What it returns:

• Numeric codes: 13 for Enter, 27 for Escape, 65 for A
• Same code regardless of Shift/Caps Lock state
• No longer maintained in web standards

Migration Example

// ❌ Old way (deprecated)
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 13) {
    console.log('Enter pressed');
  }
});

// ✅ Modern way
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter pressed');
  }
});

Side-by-Side Comparison

When to Use Each Property

Use event.key when:

• You care about what character was typed
• Handling text input or form submissions
• Implementing keyboard shortcuts (Ctrl+C, Ctrl+V)
• Need to distinguish between "a" and "A"

Use event.code when:

• Building game controls (WASD movement)
• Need consistent behavior across keyboard layouts
• Care about physical key position, not character
• Distinguishing left vs right modifier keys

Avoid event.keyCode:

• It's deprecated and may be removed from browsers
• Use event.key or event.code instead in all new code
• Only maintain it if supporting very old browsers

Related Guides

Looking for more information? Check out these related guides:

• Why keyCode is Deprecated - Learn why you should stop using keyCode
• Arrow Keys Guide - Complete guide to handling arrow keys
• Special Keys Guide - Working with Ctrl, Alt, Shift, and Meta