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

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.)

Note: Enter Key event is disabled to avoid unwanted post backs.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 4.4 by 12 people

  • Currently 4.416667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


February 26. 2008 03:18

Page title should be changed to "onKeyPress, onKeyDown, onKeyUp - The Difference Between Javascript Key Events".

Joe | Reply

January 13. 2009 14:17

I am having 3  js file to be loaded. In each js file i am attaching keydown event with different functions. Now when a key is pressed they are behaving differently in my parent window and differntly in popup window. How can i trace the issue.

Satya | Reply

October 22. 2009 15:16

Social comments and analytics for this post

This post was mentioned on Twitter by bloggingdev: KeyPress, KeyDown, KeyUp - The Difference Between Javascript Key Events - http://su.pr/2tWcs3

uberVU - social comments | Reply

December 26. 2009 19:28

I like what I see. keep it going

cash loans | Reply

Add comment

(Will not be displayed!)