Teach with us

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 07:06:41

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements