jQuery on() 方法

我会带着你远行 2021-06-26 16:06 405阅读 0赞

## 实例 ##

向 `<p>` 元素添加 `click` 事件处理程序：

$(document).ready(function(){ 
      $("p").on("click",function(){ 
        alert("段落被点击了。");
      });
    });

## 定义和用法 ##

`on()` 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，`on()` 方法是 `bind()`、`live()` 和 `delegate()` 方法的新的替代品。该方法给 `API` 带来很多便利，我们推荐使用该方法，它简化了 `jQuery` 代码库。

**注意**：使用 `on()` 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。  
**提示**：如需移除事件处理程序，请使用 `off()` 方法。  
**提示**：如需添加只运行一次的事件然后移除，请使用 `one()` 方法。

## 语法 ##

$(selector).on(event,childSelector,data,function)

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">event</td> 
   <td align="left">必需。规定要从被选元素移除的一个或多个事件或命名空间。</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">由空格分隔多个事件值，也可以是数组。必须是有效的事件。</td> 
  </tr> 
  <tr> 
   <td align="left">childSelector</td> 
   <td align="left">可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 <code>delegate()</code> 方法）。</td> 
  </tr> 
  <tr> 
   <td align="left">data</td> 
   <td align="left">可选。规定传递到函数的额外数据。</td> 
  </tr> 
  <tr> 
   <td align="left">function</td> 
   <td align="left">可选。规定当事件发生时运行的函数。</td> 
  </tr> 
 </tbody> 
</table>

## 更多实例 ##

**`bind()` 改为 `on()`**  
如何使用 `on()` 来达到与 `bind()` 相同的效果。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("#div1").on("click",function(){ $(this).css("background-color","pink"); }); $("#div2").bind("click",function(){ $(this).css("background-color","pink"); }); }); </script>
    </head>
    <body>
    
    <h4 style="color:green;">该实例演示了如何使用 on() 来达到与 bind() 相同的效果。</h4>
    
    <div id="div1" style="border:1px solid black;">这些一些文本。
    <p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
    </div><br>
    
    <div id="div2" style="border:1px solid black;">这些一些文本。
    <p>点我使用 <b>bind() 方法设置背景颜色</b>。</p>
    </div>
    
    </body>
    </html>

**`delegate()` 改为 `on()`**  
如何使用 `on()` 来达到与 `delegate()` 相同的效果。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("#div1").on("click","p",function(){ $(this).css("background-color","pink"); }); $("#div2").delegate("p","click",function(){ $(this).css("background-color","pink"); }); }); </script>
    </head>
    <body>
    
    <h4 style="color:green;">该实例演示了如何使用 on() 来达到与 delegate() 相同的效果。.</h4>
    
    <div id="div1">
    <p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
    </div>
    
    <div id="div2">
    <p>点我使用 <b>delegate() 方法设置背景颜色</b>。</p>
    </div>
    
    </body>
    </html>

`live()` 改为 `on()`  
如何使用 `on()` 来达到与 `live()` 相同的效果。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js"> </script>
    <script> $(document).ready(function(){ $("#div1").on("click",function(){ $(this).css("background-color","pink"); }); $("#div2").live("click",function(){ $(this).css("background-color","pink"); }); }); </script>
    </head>
    <body>
    
    <h4 style="color:green;">该实例演示了如何使用 on() 和 live()。</h4>
    
    <div id="div1" style="border:1px solid black;">这是一些文本。
    <p>点击此处，使用 <b>on() 方法来设置背景颜色</b>。</p>
    </div><br>
    
    <div id="div2" style="border:1px solid black;">这是一些文本。
    <p>点击此处，使用 <b>live() 方法来设置背景颜色</b>。</p>
    </div>
    <p><b>注意：</b>live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。</p>
    </body>
    </html>

添加多个事件处理程序  
如何向元素添加多个事件处理程序。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("p").on("mouseover mouseout",function(){ $("p").toggleClass("intro"); }); }); </script>
    <style type="text/css"> .intro { font-size:150%; color:red; } </style>
    </head>
    <body>
    
    <p>Move the mouse pointer over this paragraph.</p>
    
    </body>
    </html>

使用 `map` 参数添加多个事件处理程序  
如何使用 `map` 参数向被选元素添加多个事件处理程序。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("p").on({ mouseover:function(){ $("body").css("background-color","lightgray");}, mouseout:function(){ $("body").css("background-color","lightblue");}, click:function(){ $("body").css("background-color","yellow");} }); }); </script>
    </head>
    <body>
    
    <p>Click or move the mouse pointer over this paragraph.</p>
    
    </body>
    </html>

在元素上添加自定义事件  
如何在元素上添加自定义命名空间事件。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("p").on("myOwnEvent", function(event, showName){ $(this).text(showName + "! What a beautiful name!").show(); }); $("button").click(function(){ $("p").trigger("myOwnEvent",["Anja"]); }); }); </script> 
    </head>
    <body>
    
    <button>Trigger custom event</button>
    <p>Click the button to attach a customized event on this p element.</p>
    
    </body>
    </html>

向函数传递数据  
如何向函数传递数据。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> function handlerName(event) { alert(event.data.msg); } $(document).ready(function(){ $("p").on("click", { msg: "You just clicked me!"}, handlerName) }); </script>
    </head>
    <body>
    
    <p>Click me!</p>
    
    </body>
    </html>

向未来的元素添加事件处理程序  
演示 `on()` 方法也适用于尚未创建的元素。

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("div").on("click","p",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script>
    </head>
    <body>
    
    <div style="background-color:yellow">
    <p>This is a paragraph.</p>
    <p>Click any p element to make it disappear. Including this one.</p>
    <button>Insert a new p element after this button</button>
    </div>
    
    </body>
    </html>

移除事件处理程序  
如何使用 `off()` 方法移除事件处理程序。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ $("p").on("click",function(){ $(this).css("background-color","pink"); }); $("button").click(function(){ $("p").off("click"); }); }); </script>
    </head>
    <body>
    
    <p>点击这个段落修改它的背景颜色。</p>
    <p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
    
    <button>移除 click 事件句柄</button>
    
    </body>
    </html>

**`on()` 和 `click()` 的区别:**

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 `on()` 能成功的绑定到动态控件中。

以下实例中原先的 `HTML` 元素点击其身后的 `Delete` 按钮就会被删除。而动态添加的 `HTML` 元素，使用 `click()` 这种写法，点击 `Delete` 按钮无法删除；使用 `On()` 方式可以。

$("#newclick").click(function(){  
            $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
        });
        $("#newon").click(function(){  
            $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
        });
        $(".delete").click(function(){  
            $(this).parent().remove(); 
        }); 
    
        $(".li").on('click', ".deleteon", function(){ 
            $(this).parent().remove(); 
        })
        $(".deleteclick").click(function(){  
            $(this).parent().remove(); 
        });