Open In App

jQuery event.type Property

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery event.type is an inbuilt property that is used to return which event type is started. 

Syntax:

event.type

Parameter: It does not accept any parameter because it is a property, not a function. 

Example 1: This example shows the working of an event.type property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <!-- jQuery code to show the working of this property -->
    <script>
        $(document).ready(function () {
            $("#div1").on("click dblclick mouseover mouseout",
                function (event) {
                    $(".div2").html("Event: " + event.type);
                });
        });
    </script>
    <style>
        #div1 {
            width: 230px;
            height: 100;
            display: block;
            padding: 25px;
            border: 2px solid green;
            font-size: 20px;
        }
 
        .div2 {
            width: 170px;
            margin: 10px;
            height: 50px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <!-- move mouse over this box -->
    <div id="div1">
        Do any event in this box !!
    </div>
    <!-- events are being shown in this box -->
    <div class="div2"></div>
</body>
 
</html>


Output:

Example 2: In this example, a pop-up will show which event type is started.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <!-- jQuery code to show the working of this property -->
    <script>
        $(document).ready(function () {
            $("#div1").on("click dblclick mouseover mouseout",
                function (event) {
                    alert("Event: " + event.type);
                });
        });
    </script>
    <style>
        #div1 {
            width: 300px;
            height: 100px;
            display: block;
            padding: 25px;
            border: 2px solid green;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <center>
        <!-- move mouse over this box -->
        <div id="div1">
            Geeksforgeeks
        </div>
    </center>
</body>
 
</html>


Output:



Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads