Using event.which to detect specific key presses

Using event.which to Detect Specific Key Presses in JavaScript and jQuery

Table of Contents

1. Introduction to Key Event Handling
2. Understanding event.which
3. Key Differences Between event.which, event.keyCode, and event.code
4. Implementing event.which in JavaScript
5. Implementing event.which in jQuery
6. Detecting Specific Key Presses Using event.which
7. Handling Different Types of Key Events (keydown, keyup, keypress)
8. Creating a Practical Example: Keyboard Shortcuts
9. Handling Multiple Key Presses Simultaneously
10. Browser Compatibility and Deprecation Warning
11. Best Practices for Key Event Handling
12. 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, and keypress events.
• Can be used to check whether a specific key (like Enter, Esc, or Arrow 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, and Arrow Keys.

keypress (Deprecated)

• Fires when a character key is pressed down.
• Doesn’t detect non-character keys like Shift or Arrow 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.