Javascript event e.which?

Question

What is the functionality of Javascript event e.which? Please brief with example.

Answer 1

which is a property of Event objects. It is defined for key-related and mouse-related events in most browsers, but in both cases is not defined in IE (prior to version 9).

For mouse-related events, which specifies the mouse button that was involved. For IE < 9, the equivalent value is found in window.event.button. Just to complicate things, non-IE browsers also support a button property of mouse events that sometimes reports a different value from which. Also, browsers sometimes have different values for the same button or combination of buttons. If you stick to using which in all browsers that support it and button in IE < 9, the one constant is that a value of 1 always means the left mouse button was involved (though not necessarily alone).

document.onmousedown = function(e) {
    e = e || window.event;
    var button = (typeof e.which != "undefined") ? e.which : e.button;
    if (button == 1) {
        alert("Left mouse button down");
    }
};

For a full analysis, I recommend Jan Wolter's article on JavaScript mouse events.

For key-related events, which relates to the key that has been pressed. For keydown and keyup events, this is relatively simple: it's the key code for the key pressed, and returns the same value as the event's keyCode property. Since all browsers support the keyCode property and IE < 9 does not support which, you should generally use keyCode for keydown and keyup events.

For keypress events, the situation is more complicated. For printable character keys, which is the character code for the key pressed and is supported in more browsers than the charCode property. In IE < 9 the equivalent is again the keyCode property. So for detecting the character typed, the following is a cross-browser approach. Be aware that the code below should not be used for non-printable keys such as arrow keys, which you should instead detect in the keydown event:

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if (charCode) {
        alert("Character typed: " + String.fromCharCode(charCode));
    }
};

Again, for more details I recommend Jan Wolter's article on JavaScript key events

Answer 2

e.which is not an event, which is a property of the event object, which most people label as e in their event handlers. It contains the key code of the key which was pressed to trigger the event (eg: keydown, keyup).

document.onkeypress = function(myEvent) { // doesn't have to be "e"
    console.log(myEvent.which);
};

With that code, the console will print out the code of any key you press on the keyboard.

Deprecation notice (as of September 2020)

KeyboardEvent.which has been deprecated. Please look for alternatives, such as KeyboardEvent.key. Read the full API here.

Answer 3

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

You should use KeyboardEvent.key instead, if it's available.

http://codepen.io/KevinOrfas/pen/QKbKAd

Answer 4

During an event, e:

e.which

is same as:

e.keyCode

So both functions allow you to obtain the keycode of the key pressed during a keypress, keydown or keyup event

Many people use || (OR) to make sure their code works in browsers which don't support which property. Look at the code below:

document.onkeypress = function(e) {
   var key = e.which || e.keyCode;
   alert(key);
}