How to trigger the same function with jQuery multiple events?


To trigger the same function with multiple events, use the jQuery on() method with multiple events such as click, dblclick, mouse enter, mouse leave, hover, etc.

Example

You can try to run the following code to learn how to work the same function with jQuery multiple events:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").on({
   
        mouseenter: function(){
            $(this).css("background-color", "gray");
        },  
       
        mouseleave: function(){
            $(this).css("background-color", "red");
        },
       
        dblclick: function(){
            $(this).css("background-color", "yellow");
        }
       
    });
});
</script>
</head>
<body>

<p>Click, double click and move the mouse pointer.</p>

</body>
</html>

Updated on: 11-Dec-2019

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements