How to attach more than 1 event handlers to elements in jQuery ?

Last Updated : 07 Oct, 2021

With the help of event handlers, we can set the particular event available in jQuery on the HTML element. In jQuery, a number of events are available such as click(), mouseover(), dblclick(), etc. In this article, we are going to learn how we can attach more than one event handler to the elements. In jQuery, we can add one or more than one event handler on any element easily.

Example: In this example, we will add three different kinds of event handlers on a div and check all the events respectively. The very first event will be click(), when we click on the div, it will scale down, 2nd event will be dblclick(), when we double click on the div element, it will get bigger in scale, 3rd event will be mouseover, when we move our pointer to the div, it will change its color. So this is how are going to implement three different event handlers on a single div element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- jQuery CDN link -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
  
    <style> 
  
        /* Required css code */ 
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
            background-color: rgb(32, 32, 32); 
        } 
          
        .main { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            flex-direction: column; 
        } 
          
        #shape { 
            height: 200px; 
            width: 200px; 
            background-color: green; 
            border-radius: 100%; 
            margin: 100px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <!-- Shape is inscribed in main container -->
  
    <div class="main"> 
        <div id="shape"></div> 
    </div> 
  
    <script> 
  
        // Required jQuery code 
        $(document).ready(function() { 
            $("#shape").click(function() { 
                $(this).animate({ 
                    height: "50px", 
                    width: "50px" 
                }); 
            }); 
  
            $("#shape").dblclick(function() { 
                $(this).animate({ 
                    height: "300px", 
                    width: "300px" 
                }); 
            }); 
              
            $("#shape").mouseover(function() { 
                $(this).css("background-color", "white"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>