KeyPress, KeyDown, KeyUp - The Difference Between Javascript Key Events - Notes

KeyPress, KeyDown, KeyUp - The Difference Between Javascript Key Events

In JavaScript, pressing a key triggers events which can be captured and handled. Three events are triggered when a key is pressed and released:

• keydown
• keypress
• keyup

The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released.

In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button.  In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.

Below is a Key Event Tester that logs the three key events: (The first button logs keydown and keyup events. The second button logs keypress events.)