如何将多个事件处理程序附加到 jQuery 中的元素？

借助事件处理程序，我们可以在 HTML 元素上设置 jQuery 中可用的特定事件。在 jQuery 中，可以使用许多事件，例如 click()、mouseover()、dblclick() 等。在本文中，我们将学习如何将多个事件处理程序附加到元素。在 jQuery 中，我们可以轻松地在任何元素上添加一个或多个事件处理程序。

示例：在此示例中，我们将在一个 div 上添加三种不同类型的事件处理程序，并分别检查所有事件。第一个事件是click()，当我们点击div时，它会缩小，第二个事件是dblclick()，当我们双击div元素时，它会变大，第三个事件是mouseover，当我们将指针移动到 div 时，它会改变它的颜色。所以这就是如何在一个 div 元素上实现三个不同的事件处理程序。

HTML

  

    
    
    
  
    
  
        /* 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;
        }
    

  

  
    
  
    
        
    
  
    
  
        // 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");
            });
        });
    

  

输出：