JavaScript Keyboard Events: Difference between Keydown, Keyup and Keypress Events

JavaScript Keyboard Events: Difference between Keydown, Keyup and Keypress Events

What is the difference between keydown, the keyup and the keypress events? The keydown event is triggered when you press down a key. The keyyup event is triggered when you release that particular key. The keypress event is a bit different. It will be triggered only when you press an alphabet or a number. For example, if you are pressing a tab or an arrow key, the keypress event will not be triggered.

In this tutorial, we see the difference between the three keyboard events with the help of a simple and interesting example. We change the color of some cell to red, yellow and green (something like a traffic signal) based on the event triggered. Thus, just by seeing the cell color, we can easily identify which event is triggered. If you enter any character, you could see that keypress is triggered first, then followed by keydown and keyup events. If you press the arrow key, you could see that only the keydown and keyup events are triggered. But if you press a number, keypress then keydown and finally keyup event is triggered.

[yanchuntang]

great one, your teaching method is very pratical