jQuery | event.which property with Examples

Last Updated : 12 Feb, 2019

The event.which is an inbuilt property in jQuery which is used to return which keyboard key or mouse button was pressed for the event.
Syntax:

event.which

Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns which keyboard key or mouse button was pressed.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

jQuery code to show the working of this property:
Code #1:
In the below code, ascii value of the key is displayed.

<html>
  
<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script>
        $(document).ready(function() {
            <!-- jQuery code to show event.which property -->
            $("input").keydown(function(event) {
                $("div").html("Key: " + event.which);
            });
        });
    </script>
    <style>
        div {
            margin: 20px;
            width: 80px;
            height: 60px;
            padding: 20px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- Here ascii value of the key will be shown -->
    <div>
        <p></p>
    </div>
    Name :
    <input type="text">
</body>
  
</html>

Output:
Ascii value of “G” is shown-

Code #2:
In the below code, which mouse button was pressed is displayed.

<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code to show event.which property -->
        $(document).ready(function() {
            $("div").mousedown(function(event) {
                $("div").append("<br>Mouse button : " + event.which);
            });
        });
    </script>
    <style>
        div {
            border: 2px solid green;
            width: 400px;
            height: 300px;
            padding: 20px;
        }
    </style>
</head>
  
<body>
    <!-- click inside and see -->
    <div style="">Click anywhere in this box !!!</div>
</body>
  
</html>

Output:
When left button of mouse is clicked:

My Personal Notes

Related Articles

jQuery | event.which property with Examples