keydown vs keypress vs keyup

The order of events

When user presses a key or combination of different keys, keydown, keypress and keyup are triggered in that order:

1. The keydown event is triggered first when user presses a key
2. The keyup event is triggered last when user releases a key
3. In between, the keypress event is triggered

These events serve different purposes.

The keydown and keyup events are often used to handle the physical keys, while the keypress event is used to handle characters which are being typed.

The keypress ignores keys such as delete, arrows, page up, page down, home, end, ctrl, alt, shift, esc, etc. So, if we need to handle those keys, it's better to use either keydown or keyup event.

The sample code below listens on the keydown event, and closes the modal if the Esc key is pressed:

document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
        // Close the modal
    }
});

The keydown and keypress events fire multiple times if user press and hold a key.

While keyup fires only once when user releases the key.