How to trigger the same function with jQuery multiple events?

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 20-Dec-2017 07:16:56
Advertisements