Learning JavaScript? Download my free JavaScript Handbook 🔥

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:

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 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:

See the Pen Key logger demo by Flavio Copes (@flaviocopes) on CodePen.

Edit this page


Here's my latest YouTube video. I talk about work/life balance as a developer: