Keydown and Keypress

It is easy to get these two events confused with one another as both are very similar in how they work. If you were to press one of the letter keys on your keyboard then the depressing of that key triggers first a keydown event followed by a keypress event. If you just consider the letters and numbers on your keyboard then there appears to be no difference between the two events as they are triggered one after the other by the same action.

The difference between these two events comes with respect to some of the other keys on your keyboard. Not all of the keys actually generate a character that will actually be loaded into your input field.

There are a number of keys on the keyboard perform actions that do not result in a character being generated at all. Some of these such as the window and context menu keys on a keyboard being used on a Windows based system pass commands directly to the operating system. The print screen key works similarly without being limited to Windows.

Other keys such as CTRL, ALT, Shift, Caps Lock, Num Lock and Scroll Lock do not generate a character themselves but simply modify the character created when other keys are pressed. Pressing any of these keys results in a keydown event just as pressing a letter or number key does because the keydown event is triggered when any key on the keyboard is depressed where the fact that the key has been pressed gets passed to the browser. Only those keys intercepted before they get to the browser will not generate a keydown event. These keys do not however generate a keypress event as they do add any characters.

A keypress event is only triggered when an actual character is generated. So while pressing a key that generates a character generates a keydown event followed by a keypress event, it is the keypress event that is the one that is most appropriate to use to test which character has been entered and provide any other necessary character processing. That avoids the inefficiency of having the code run where a key that doesn't produce a character has been pressed.

Conversely if you want an event that can be triggered without actually adding a character or where it doesn't matter if there is a character created or not then the keydown event is probably the more appropriate to use. You could for example use the shift, ctrl, and alt keys with a keydown event to provide specific actions that do not require character input but where you want to allow actions to be triggered from the keyboard instead of the mouse (using a mousedown event).

Just to make it completely clear how these events interact let's consider an example where a capital A is types. First the shift key is depressed triggering a keydown event. Next the A key is pressed triggering a second keydown event followed by a keypress event. Finally the two keys are released triggering a keyup event for each key.

Another thing to note regarding these two events is that if you hold a key down long enough for the repeat functionality built into the operating system to activate then additional keydown and keypress events will be run. So if you hold down the shift key for a while and then tap the A key to create your capital A then there might very well be more than two keydown events triggered before the keypress event. The keypress event would only be triggered more than once if the key that triggered it was actually held down long enough for it to start adding additional copies of that character.

A single keypress event corresponds to a single character being entered. This will be preceeded by one or more keydown events. Depending on which key is pressed there may be one or more keydown events generated without them being followed by a keypress event.

Despite these two events looking very similar, when you look at them more closely they actually serve two completely different purposes.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow