jQuery event.type Property

The jQuery event.type property is used to retrieve the event type that was triggered. It is used within the event handler function and returns the event type that occurred on a specific element or document.

Syntax

Following is the syntax of the jQuery event.type property −

event.type

Parameters

This method does not accept any parameter.

Return Value

This property returns the type of event that was triggered.

Example 1

The following is the basic example of the jQuery event.type property −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button to see the event type.</p>
    <button>Click me</button>
    <script>
        $('button').click(function(event){
            alert("The trigegerd event is: '" + event.type + "' type");
        });
    </script>
</body>
</html>

Output

The program displays a button, and when it is clicked, a pop-up alert appears on the browser screen, displaying the event type that was triggered by the button element as −

When the button is clicked −

Example 2

Following is another example of the jQuery event.type property. We use this property to retrieve the event type that was triggered on a specific div element −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            padding: 10px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <div>Hover on me</div>
    <span></span>
    <script>
       $('div').mouseover(function(event){
        $('span').text("The triggered event was '" + event.type + "'");
       });
    </script>
</body>
</html>

Output

After executing the program, a box with a green background is displayed. When the mouse pointer hovers over this box, the event type is displayed next to it −

Example 3

In the example below, we assign multiple events such as 'click,' 'mouseover,' and 'mouseout' on a button element and use the event.type property, we retrieve the type of the triggered event −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            padding: 10px;
            background-color: green;
            color: white;
        }
        button{
            padding: 10px;
            margin: 10px 0px;
            width: 100px;
        }
    </style>
</head>
<body>
    <p>Click, over, out the mouse pointer on the below button</p>
    <button>Button</button>
    <p>The event type will be displayed here: </p>
    <div></div>
    <script>
       $("button").on("click dblclick mouseover mouseout", function(event) {
          $("div").html("Event: " + event.type);
    });
    </script>
</body>
</html>

Output

Once the above program is executed, it will display a button, and when the user clicks, hovers over, or moves out from the button, the triggered event will be displayed next to it as:

jquery_ref_events.htm

Print Page