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: