Keyboard events in JavaScript

In earlier JavaScript tutorials we looked at using onclick and onmouseover events to call a function when a user clicked or rolled their mouse over a button, and also the onload event to start an animation when a page had loaded. We can also use keyboard events such as when a key has been pressed on the keyboard.

Watch the video below which demonstrates how to use keyboard events, and then scroll down to see the sample code.

There are three different types of keyboard events we are using:

  • keydown
  • keypress
  • keyup

A keydown event is triggered when a button on the keyboard has been pressed down. A keyup event is triggered when a button that has been pressed on the keyboard is released. These events use keycodes to represent the many letters, numbers and other keys available. A keycode is returned to the program when a button has been pressed. You can find a list of keycodes here.

A keypress event is only triggered when you click on a key that represents a character such as a letter or number. A keypress event will tell the program what character the key represents, while the keydown and keyup events only tell the program what key has been pressed or released.

Keydown and keyup events will not tell the program if a letter key that was pressed is uppercase or lowercase. However, if you use the keypress event, then a program could detect when the Shift button and a character key were pressed to make an uppercase letter or another character (eg. Shift + p = P key, and Shift + 5 = % key).

The keydown and keyup events only trigger once when a key is pressed. Another thing to note is that keycodes return a number which represents a key pressed, and they work with keydown and keyup events, while ASCII codes return an ASCII code and work with keypress events. This link shows both the keycodes and ASCII codes that represent different keys.

The code below shows how to use a keydown event and a keycode of 65 to detect when the ‘a’ letter key is pressed on the keyboard. If the ‘a’ key is pressed, then an alert message is displayed.

<title>Key press events</title>
window.addEventListener("keydown", checkKeyPress, false);
// The parameters of the event listener are event, function to run, useCapture (optional).
// This event listener runs checkKeyPress function when a key is pressed down
// You can use keydown or keyup to check what key has been pressed or released
// this function checks to see if the letter 'a' key has been pressed
function checkKeyPress(key) {
 if (key.keyCode == "65") {
 alert("The 'a' letter key has been pressed.");
 // 65 is the keycode that is returned when the 'a' letter key is pressed
 // if you use keypress event instead of keydown/up then you must use ASCII code instead of keycode
 <p>Press the 'a' key to see the alert message<p>

Try it yourself

Try the above code and then use the keyup event instead to see what happens. Change the keycode in the ‘if’ statement to test other key presses, and then try using the keypress event with ASCII codes. Also try using canvas.addEventListener in a canvas instead of window.AddEventListener.


As an example, the letter ‘a‘ key is represented by the keycode of 65 using a keydown or keyup event and does not distinguish between upper and lowercase. If you use a keypress event, then you will need to use the ASCII code of 65 to check for uppercase A and 97 for lowercase a. For more information about the different keyboard events and how key codes work, click here. Note that some keys are not compatible with keyboard events in certain browsers. You can check out compatibility of browsers here.

A note about the addEventListener method

The useCapture parameter in the addEventListener method is optional. If used, it must be a boolean value. The boolean value will specify whether the event being used should be executed during the bubbling or capturing phase. A boolean value of true  means the event handler is executed during the capturing phase, while false (default option) means that the event handler is executed during the bubbling phase. To find out more about bubbling and capturing, click here.