Understanding onKeyPress vs. onKeyUp vs. onKeyDown

While searching for the differences between these three events, you may encounter a common misconception that onKeyPress occurs simultaneously with onKeyUp. Let's clarify this confusion and shed light on the unique characteristics of each event.

An Event Timeline

In the sequence of key input events, we have the following breakdown:

1. onKeyDown: Triggered when the user initially presses a key.
2. onKeyPress: Deprecated and recommended to use onKeyDown instead. This event occurred when the user both pressed and released a key, effectively being a combination of onKeyDown and onKeyUp.
3. onKeyUp: Triggered when the user releases the previously pressed key.

Analogy with Mouse Events

To grasp the relationships between these key events, let's draw an analogy with their mouse counterparts:

• onKeyDown: Equivalent to MouseDown
• onKeyPress: Equivalent to Click (Now deprecated and replaced by onKeyDown)
• onKeyUp: Equivalent to MouseUp

Browser Exception: WebKit

In the world of web browsers, WebKit stands out by introducing an additional event: textInput. The event sequence for WebKit thus becomes:

keydown
keypress
textInput     
keyup

Practical Demonstration

To witness these events in action, run the following code snippet:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

This script logs the event type to the console as you interact with the keyboard. You'll notice the distinct sequence of events as you press and release keys.