Keyboard events

Learn to capture pressed keys with keydown and keyup.

keydown and keyup

Keyboard events come in two main forms: keydown fires when a key is pressed, keyup when it is released. If you hold the key down, keydown repeats.

document.addEventListener('keydown', (event) => {
  console.log('Pressed:', event.key);
});
document.addEventListener('keyup', (event) => {
  console.log('Released:', event.key);
});

You may see keypress in old code; but this event is deprecated and not used in new code. Use keydown for new work.

Reading the key with event.key

For keyboard events, the event.key property gives the value of the pressed key. Letters return lowercase like 'a' or 'b'; special keys return readable names like 'Enter', 'Escape', 'ArrowUp'.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Enter was pressed');
  }
});

It is case-sensitive: 'a' and 'A' are different values. With Shift, you get 'A'. So always compare against the exact value.

Exercise Log the pressed key on keydown

Add an arrow function handler with document.addEventListener('keydown', ...). The handler parameter should be event and it should call console.log(event.key) inside.

Show example solution

document.addEventListener('keydown', (event) => {
  console.log(event.key);
});

Test yourself

Which event fires repeatedly while a key is held down?
- keyup
- change
- input
- keydown
Show answer

keydown — Correct! keydown repeats while the key is held down.

Complete the keydown listener

document.addEventListener('____', (event) => {
  console.log(event.key);
});

Show answer

document.addEventListener('keydown', (event) => {
  console.log(event.key);
});

Match the keyboard concepts

keydown

On key press
keyup

On key release
event.key

Pressed key value
'Enter'

Confirm key

Next lesson: The event object

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies