onKeyPress Vs. onKeyUp and onKeyDown

Question

What is the difference between these three events? Upon googling I found that:

• The onKeyDown event is triggered when the user presses a key.
• The onKeyUp event is triggered when the user releases a key.
• The onKeyPress event is triggered when the user presses & releases a key (onKeyDown followed by onKeyUp).

I understand the first two, but isn't onKeyPress the same as onKeyUp? Is it possible to release a key (onKeyUp) without pressing it (onKeyDown)?

This is a bit confusing, can someone clear this up for me?

Answer 1

NOTE KeyPress is now deprecated. Use KeyDown instead.

KeyPress, KeyUp and KeyDown are analogous to, respectively: Click, MouseUp, and MouseDown.

1. Down happens first
2. Press happens second (when text is entered)
3. Up happens last (when text input is complete).

The exception is webkit, which has an extra event in there:

keydown keypress textInput      keyup 

Below is a snippet you can use to see for yourself when the events get fired:

window.addEventListener("keyup", log); window.addEventListener("keypress", log); window.addEventListener("keydown", log);  function log(event){   console.log( event.type ); }

Answer 2

Check here for the archived link originally used in this answer.

From that link:

In theory, the onKeyDown and onKeyUp events represent keys being pressed or released, while the onKeyPress event represents a character being typed. The implementation of the theory is not same in all browsers.