jquery的on()方法总结

60 阅读 0 评论 40 点赞

我是靠谱客的博主默默哈密瓜，最近开发中收集的这篇文章主要介绍jquery的on()方法总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

摘自菜鸟教程废话不说直接上demo

实例：

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

 1 <html>
 2 <head>
 3 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
 4 </script>
 5 <script>
 6 $(document).ready(function(){
 7   $("p").on("click",function(){
 8     alert("段落被点击了。");
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 
15 <p>点击这个段落。</p>
16 
17 </body>
18 </html>

运行结果:

定义和用法：

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

2.自jquery1.7版本之后 on()方法是bind() live() delegate() 方法新的替代品推荐使用此方法!使用其他的方法可能会出现不兼容的问题

3.使用on()方法添加的事件程序适用于当前及未来的程序(这里的未来的程序是脚本创建的新元素，或者是以前的事件代理程序)

4. 如果要移除使用on()方法添加的事件处理程序请使用与之对应的off()方法

5.如果你想事件执行一次就移除请使用one()方法

6.on()方法支持自定义事件

语法：

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

参数说明：

event 必须事件的名称(可以自定义) 支持绑定多个事件多个事件用空格分开也可以是map参数和数组

childSelector 可选添加事件程序的子元素而且不是父选择器本身

data 可选传递到事件对象 event的额外的参数

function 必选规定事件发生时运行的函数

实例分析：

bind()改为on()

<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/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;">This example demonstrates how to achieve the same effect using on() and bind().</h4>

<div id="div1" style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>on() method</b>.</p>
</div><br>

<div id="div2" style="border:1px solid black;">This is some text.
<p>Click to set background color using the <b>bind() method</b>.</p>
</div>

</body>
</html>

运行结果:

运行结果2：

从delegate()改为on()

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("#div1").on("click","p",function(){
 9     $(this).css("background-color","pink");
10   });
11   $("#div2").delegate("p","click",function(){
12     $(this).css("background-color","pink");
13   });
14 });
15 </script>
16 </head>
17 <body>
18 
19 <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and delegate().</h4>
20 
21 <div id="div1">
22 <p>Click to set background color using the <b>on() method</b>.</p>
23 </div>
24 
25 <div id="div2">
26 <p>Click to set background color using the <b>delegate() method</b>.</p>
27 </div>
28 
29 </body>
30 </html>

运行结果:

从live改为on

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js">
 6 </script>
 7 <script>
 8 $(document).ready(function(){
 9   $("#div1").on("click",function(){
10     $(this).css("background-color","pink");
11   });
12   $("#div2").live("click",function(){
13     $(this).css("background-color","pink");
14   });
15 });
16 </script>
17 </head>
18 <body>
19 
20 <h4 style="color:green;">该实例演示了如何使用 on() 和 live()。</h4>
21 
22 <div id="div1" style="border:1px solid black;">这是一些文本。
23 <p>点击此处，使用 <b>on() 方法来设置背景颜色</b>。</p>
24 </div><br>
25 
26 <div id="div2" style="border:1px solid black;">这是一些文本。
27 <p>点击此处，使用 <b>live() 方法来设置背景颜色</b>。</p>
28 </div>
29 <p><b>注意：</b>live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。</p>
30 </body>
31 </html>

运行结果:

添加多个事件处理程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("p").on("mouseover mouseout",function(){
 9     $("p").toggleClass("intro");
10   });
11 });
12 </script>
13 <style type="text/css">
14 .intro
15 {
16 font-size:150%;
17 color:red;
18 }
19 </style>
20 </head>
21 <body>
22 
23 <p>Move the mouse pointer over this paragraph.</p>
24 
25 </body>
26 </html>

注意:toggleClass()方法是切换css class样式的方法! 这个可以对比学习addClass 和removeClass

使用map参数添加多个事件程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("p").on({
 9     mouseover:function(){$("body").css("background-color","lightgray");},  
10     mouseout:function(){$("body").css("background-color","lightblue");}, 
11     click:function(){$("body").css("background-color","yellow");}  
12   });
13 });
14 </script>
15 </head>
16 <body>
17 
18 <p>Click or move the mouse pointer over this paragraph.</p>
19 
20 </body>
21 </html>

运行结果

在元素上添加自定义事件:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("p").on("myOwnEvent", function(event, showName){
 9     $(this).text(showName + "! What a beautiful name!").show();
10   });
11   $("button").click(function(){
12     $("p").trigger("myOwnEvent",["Anja"]);
13   });
14 });
15 </script> 
16 </head>
17 <body>
18 
19 <button>Trigger custom event</button>
20 <p>Click the button to attach a customized event on this p element.</p>
21 
22 </body>
23 </html>

运行结果：

Tip：上述代码的myOwnEvent是自定义的方法的名称

trigger是绑定自定义事件的意思

向函数中添加数据

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 function handlerName(event) 
 8 {
 9   alert(event.data.msg);
10 }
11 
12 $(document).ready(function(){
13   $("p").on("click", {msg: "You just clicked me!"}, handlerName)
14 });
15 </script>
16 </head>
17 <body>
18 
19 <p>Click me!</p>
20 
21 </body>
22 </html>

显示结果:

注意添加的数据是以event的data属性添加的

向未来的数据(脚本创建的元素)添加事件：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("div").on("click","p",function(){
 9     $(this).slideToggle();
10   });
11   $("button").click(function(){
12     $("<p>This is a new paragraph.</p>").insertAfter("button");
13   });
14 });
15 </script>
16 </head>
17 <body>
18 
19 <div style="background-color:yellow">
20 <p>This is a paragraph.</p>
21 <p>Click any p element to make it disappear. Including this one.</p>
22 <button>Insert a new p element after this button</button>
23 </div>
24 
25 </body>
26 </html>

提示 slideToggle()是折叠代码详情可以参考jquery文档

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script>
 9 $(document).ready(function(){
10   $("p").on("click",function(){
11     $(this).css("background-color","pink");
12   });
13   $("button").click(function(){
14     $("p").off("click");
15   });
16 });
17 </script>
18 </head>
19 <body>
20 
21 <p>点击这个段落修改它的背景颜色。</p>
22 <p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
23 
24 <button>移除 click 事件句柄</button>
25 
26 </body>
27 </html>