Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery event.which Property
jQuery | event.which Property: Learn about the jQuery event.which Property with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 29, 2022
event.which Property
An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.which Property.
The event.which is a built-in property in jQuery. It allows us to know which key has been pressed on the keyboard, or which mouse button has been clicked.
Each key on the keyboard has some numerical value – called ASCII values. Hence, event.which property returns the ASCII value of the key pressed. We can attach this with the keypress, keyup, and keydown methods. Similarly, "event.which property also returns the numerical value of the mouse click, like – '1' for the left click.
event.which Property Syntax
event.which
Since this is a property, it does not accept any parameters. It returns a numerical value for the event. The example given below shows the implementation of event.which property when the following the user writes something in the provided text box, or when the image is clicked.
jQuery event.which Property Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery Event - Which Property</h2>
<hr>
<h4 style="color:darkblue">Welcome to Include Help !</h4>
<p>This is a jQuery Tutorial for Event Methods.</p>
<h4 style="color:darkblue">Thanks for visiting !</h4>
<label>Name: </label><input type="text"> <br><br>
<p><b>Click the Image</b></p>
<img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('input').keydown(function(){
$('h3').html('Key Number ' + event.which + ' pressed !');
});
$('img').click(function(){
$('h3').html('Mouse Number ' + event.which + ' pressed !');
});
});
</script>
</html>
Output:
