JavaScript Event which Property: Key or Button Code

JavaScript Event which Property: Identifying Key and Button Codes

The JavaScript Event object is at the heart of handling user interactions on web pages. When an event like a key press or a mouse click occurs, an Event object is created, providing a wealth of information about the event. One of the properties within this object is the which property, which historically has been used to identify which key was pressed or which mouse button was clicked. While the which property is now deprecated in favor of key and button properties, understanding its history and usage is essential, especially when working with older codebases or needing to ensure compatibility with older browsers.

What is the which Property?

The which property of a JavaScript Event object is an integer that represents the numeric code of the key pressed or the mouse button clicked during an event. In key events (such as keydown, keypress, and keyup), it returns a numeric key code. For mouse events (like mousedown, mouseup, and click), it returns a numeric button code.

Purpose of the which Property

The primary purpose of the which property was to:

• Identify which key was pressed during keyboard events.
• Identify which mouse button was clicked during mouse events.
• Provide a numerical representation of input that could be used for further processing or filtering.

Note: While the which property is now considered deprecated, it is essential to be aware of it, especially when dealing with older codebases. Modern applications should use event.key and event.button where appropriate. ⚠️

Syntax of the which Property

The syntax for accessing the which property is straightforward:

event.which;

Where event is the Event object of the triggered event. The return value is an integer representing the specific key or button that triggered the event.

Key Codes

When dealing with keyboard events, event.which provides a numerical key code that corresponds to the pressed key. These codes can vary slightly between different operating systems and browsers, but the common ones are relatively consistent. However, using event.key is now the recommended way to get key values as it gives the actual character or action of the key rather than numeric key codes.

Note: It is generally better to use event.key or event.code for key events whenever possible as these provide more user-friendly values than event.which. 💡

Button Codes

For mouse events, the event.which property provides a numeric button code representing which mouse button was pressed. Here are the typical values:

• 1: Left mouse button.
• 2: Middle mouse button.
• 3: Right mouse button.

Note: Use of event.button is recommended for modern applications as it is more clear about which button was pressed. 📝

Examples of which Property

Let’s explore some practical examples demonstrating how the which property can be used in JavaScript events. Though we do not recommend using it, it will be useful when maintaining legacy code.

Example 1: Displaying Key Codes

This example shows how to capture keydown events and display their which property values.

<input
  type="text"
  id="keyCodeInput"
  placeholder="Press a key here"
  style="padding: 10px; margin-bottom: 10px;"
/>
<div id="keyCodeDisplay" style="font-size: 1.2em; font-weight: bold;"></div>

<script>
  const keyInput = document.getElementById("keyCodeInput");
  const keyDisplay = document.getElementById("keyCodeDisplay");

  keyInput.addEventListener("keydown", function (event) {
    const keyCode = event.which;
    keyDisplay.textContent = `Key Code: ${keyCode}`;
  });
</script>

Explanation: This example demonstrates how event.which property captures and shows numerical key codes. Try pressing various keys to see how their codes appear.

Example 2: Displaying Button Codes

This example shows how to capture mousedown events and display their which property values.

<div
  id="mouseDiv"
  style="
    width: 200px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    margin-bottom: 10px;
  "
>
  Click Here
</div>
<div id="buttonCodeDisplay" style="font-size: 1.2em; font-weight: bold;"></div>

<script>
  const mouseDiv = document.getElementById("mouseDiv");
  const buttonDisplay = document.getElementById("buttonCodeDisplay");

  mouseDiv.addEventListener("mousedown", function (event) {
    const buttonCode = event.which;
    buttonDisplay.textContent = `Button Code: ${buttonCode}`;
  });
</script>

Explanation: Here, we use event.which to capture the numerical button codes based on which mouse button was pressed in the div. Try clicking using the left, right or middle mouse buttons.

Example 3: Combining Key and Mouse Events

This example combines both key and mouse events to show the which values based on the interaction.

<div
  id="combinedDiv"
  style="
    width: 250px;
    height: 150px;
    border: 1px solid blue;
    text-align: center;
    line-height: 150px;
    margin-bottom: 10px;
  "
>
  Interact Here
</div>
<div id="combinedDisplay" style="font-size: 1.2em; font-weight: bold;"></div>

<script>
  const combinedDiv = document.getElementById("combinedDiv");
  const combinedDisplay = document.getElementById("combinedDisplay");

  combinedDiv.addEventListener("mousedown", function (event) {
    const code = event.which;
    combinedDisplay.textContent = `Mouse Button Code: ${code}`;
  });

  document.addEventListener("keydown", function (event) {
    const code = event.which;
    combinedDisplay.textContent = `Key Code: ${code}`;
  });
</script>

Explanation: This example demonstrates that when a click happens in the div, event.which property returns button code and for any key press, it shows the numeric key code. This example consolidates key and mouse actions in one interaction block.

Browser Support

The which property of the JavaScript Event object has broad support across all major browsers. However, it’s worth remembering that newer properties like event.key and event.button are recommended for modern development as they offer more direct values for user interactions.

Browser	Support
Chrome	Full Support
Firefox	Full Support
Safari	Full Support
Edge	Full Support
Opera	Full Support

Note: While event.which is widely supported, use event.key for key events and event.button for mouse events for better clarity and maintainability in modern applications. ✅

Key Differences with key, and button

It is important to understand that event.which is now considered deprecated in favor of event.key, event.code for key events, and event.button for mouse events.

• event.key: This property provides a more readable value of the key, such as “Enter,” “a,” or “Shift.” It avoids the inconsistencies of numerical key codes.
• event.code: This property gives a physical location code of the key pressed, like “KeyA”, “ShiftLeft”.
• event.button: For mouse events, event.button directly indicates which button was pressed. 0 for the main button (usually the left button), 1 for the middle button, and 2 for the right button.

Conclusion

While the which property served an important role historically, developers should now shift to using more modern and clear properties like event.key, event.code and event.button. This provides more meaningful information about user interaction. Understanding which, however, is still valuable when maintaining older code. Always opt for clarity and maintainability in your code and leverage modern APIs for optimal results.