![]()
Using event.which to Detect Specific Key Presses in JavaScript and jQuery
Table of Contents
- Introduction to Key Event Handling
- Understanding
event.which - Key Differences Between
event.which,event.keyCode, andevent.code - Implementing
event.whichin JavaScript - Implementing
event.whichin jQuery - Detecting Specific Key Presses Using
event.which - Handling Different Types of Key Events (
keydown,keyup,keypress) - Creating a Practical Example: Keyboard Shortcuts
- Handling Multiple Key Presses Simultaneously
- Browser Compatibility and Deprecation Warning
- Best Practices for Key Event Handling
- Conclusion
1. Introduction to Key Event Handling
Key event handling is an essential part of web development, especially for applications that rely on user input. Whether it’s keyboard shortcuts, form validation, or game development, detecting specific key presses is a fundamental requirement.
JavaScript provides several ways to capture and identify key events, and event.which was historically one of the most common properties used for this purpose.
2. Understanding event.which
The event.which property returns the numerical ASCII value of the key pressed by the user. It was introduced to standardize key event handling across different browsers but is now considered deprecated in favor of event.key and event.code.
How event.which Works
- Returns a number representing the pressed key.
- Works in
keydown,keyup, andkeypressevents. - Can be used to check whether a specific key (like
Enter,Esc, orArrow Keys) was pressed.
3. Key Differences Between event.which, event.keyCode, and event.code
| Property | Description | Status |
|---|---|---|
event.which | Returns the ASCII code of the pressed key. | Deprecated |
event.keyCode | Returns the ASCII code of the pressed key, similar to event.which. | Deprecated |
event.code | Returns the physical key on the keyboard, irrespective of language settings. | Recommended |
event.key | Returns the character of the pressed key. | Recommended |
Although event.which is deprecated, many legacy applications still use it, making it important to understand its functionality.
4. Implementing event.which in JavaScript
Here’s how you can use event.which in plain JavaScript to detect key presses:
document.addEventListener("keydown", function(event) {
if (event.which === 13) {
console.log("Enter key was pressed!");
}
});
This script listens for the keydown event and checks if the Enter key (ASCII value 13) was pressed.
5. Implementing event.which in jQuery
In jQuery, the syntax is simpler and cleaner:
$(document).keydown(function(event) {
if (event.which === 27) { // Escape key
alert("Escape key was pressed!");
}
});
This jQuery snippet listens for a keydown event and triggers an alert when the Esc key (ASCII value 27) is pressed.
6. Detecting Specific Key Presses Using event.which
Here’s a list of commonly used keys and their corresponding event.which values:
| Key | event.which Value |
|---|---|
| Enter | 13 |
| Escape (Esc) | 27 |
| Space | 32 |
| Left Arrow | 37 |
| Up Arrow | 38 |
| Right Arrow | 39 |
| Down Arrow | 40 |
| A-Z | 65-90 |
| 0-9 | 48-57 |
Example: Detecting Arrow Key Presses
$(document).keydown(function(event) {
switch (event.which) {
case 37:
console.log("Left arrow key pressed");
break;
case 38:
console.log("Up arrow key pressed");
break;
case 39:
console.log("Right arrow key pressed");
break;
case 40:
console.log("Down arrow key pressed");
break;
}
});
This script logs the direction when an arrow key is pressed.
7. Handling Different Types of Key Events (keydown, keyup, keypress)
keydown
- Fires when the key is pressed down.
- Best for capturing functional keys like
Shift,Ctrl,Alt, andArrow Keys.
keypress (Deprecated)
- Fires when a character key is pressed down.
- Doesn’t detect non-character keys like
ShiftorArrow Keys.
keyup
- Fires when the key is released.
- Useful for detecting when a key was held down.
Example: Using keyup
$(document).keyup(function(event) {
console.log("Key released: " + event.which);
});
8. Creating a Practical Example: Keyboard Shortcuts
Let’s implement a simple keyboard shortcut system using event.which.
$(document).keydown(function(event) {
if (event.which === 83 && event.ctrlKey) { // Ctrl + S
event.preventDefault();
alert("You triggered a custom save action!");
}
});
This prevents the browser’s default Ctrl + S behavior and shows a custom alert instead.
9. Handling Multiple Key Presses Simultaneously
You can detect multiple key presses by tracking the keys in an object.
let keys = {};
$(document).keydown(function(event) {
keys[event.which] = true;
if (keys[17] && keys[67]) { // Ctrl + C
console.log("Copy shortcut detected");
}
});
$(document).keyup(function(event) {
delete keys[event.which];
});
This script detects when the Ctrl and C keys are pressed together.
10. Browser Compatibility and Deprecation Warning
Since event.which is deprecated, you should migrate to event.key or event.code:
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log("Enter key was pressed!");
}
});
Browser Support Table
| Browser | event.which | event.key | event.code |
|---|---|---|---|
| Chrome | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ |
| Edge | ✅ | ✅ | ✅ |
| Safari | ✅ | ✅ | ✅ |
| IE11 | ✅ | ❌ | ❌ |
While event.which works across all browsers, event.key and event.code are the preferred modern alternatives.
11. Best Practices for Key Event Handling
✔ Use event.key or event.code instead of event.which.
✔ Avoid using keypress since it’s deprecated.
✔ Always call event.preventDefault() when overriding browser shortcuts.
✔ Use keyup instead of keydown for actions that shouldn’t repeat when holding a key.
Even though event.which is deprecated, understanding it is crucial for maintaining legacy codebases. Modern web applications should migrate to event.key and event.code for improved clarity and compatibility.
By mastering key event handling, you can create interactive and user-friendly web applications, whether for keyboard shortcuts, accessibility enhancements, or custom user interactions.
