Browser events: Keyboard events

Let’s now dive into keyboard events.

There are 2 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 you typically listen to mouse and touch events on a specific element, it’s common to listen for keyboard events on the document object:

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

The parameter passed to the event listener is a KeyboardEvent.

This event object, in addition to the Event object properties 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 on the keyboard
  • metaKey true if the 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 the shift key was pressed when the event was fired

The demo is a keylogger that will show you the values of some of the properties I listed above.

Lessons in this unit:

0: Introduction
1: Handling events
2: The `DOMContentLoaded` event
3: The `event` object
4: Mouse events
5: ▶︎ Keyboard events
6: `preventDefault()`
7: Stopping event propagation
8: Bubbling and capturing
9: Form submit event
10: Input fields events
11: Creating custom events
Want to learn more? Check out our courses