# Keyboard events

> Learn how to handle keyboard events in JavaScript with keydown and keyup on the document, and read the KeyboardEvent key, code, and modifier properties.

Author: Flavio Copes | Published: 2019-08-19 | Canonical: https://flaviocopes.com/keyboard-events/

There are 3 types of events when interacting with keyboard events:

- `keydown` the keyboard key has been pressed
- `keyup` the keyboard key has been released

`keydown` is also fired when the key repeats while the button _stays_ pressed.

While mouse and touch events are typically listened on a specific element, it's common to listen for keyboard events on the **document**:

```js
document.addEventListener('keydown', (event) => {
  // key pressed
})
```

The parameter passed to the event listener is a [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent).

This event object, in addition to the [Event object properties](https://developer.mozilla.org/en-US/docs/Web/API/Event) offers us (among others) these unique properties:

- `altKey` true if alt key was pressed when the event was fired
- `code` the code of the key pressed, returned as a string
- `ctrlKey` true if ctrl key was pressed when the event was fired
- `key` the value of the key pressed, returned as a string
- `locale` the keyboard locale value
- `location` the [location of the key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location) on the keyboard
- `metaKey` true if meta key was pressed when the event was fired
- `repeat` true if the key has been repeated (e.g. the key has not been released)
- `shiftKey` true if shift key was pressed when the event was fired

This demo is a keylogger which will show you the values of some of the properties I listed above: <https://codepen.io/flaviocopes/pen/LopWmq/>