jquery的on()方法总结

最新推荐文章于 2023-11-03 08:48:26 发布

xsatc

最新推荐文章于 2023-11-03 08:48:26 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/xsatc/article/details/88788833

版权

本文总结了jQuery的on()方法，包括其作为bind(), live(), delegate()的替代品，用于添加事件处理程序的功能，支持当前及未来元素，以及如何移除和触发事件。文中通过多个示例演示了on()的用法，如绑定多个事件、添加自定义事件、传递数据和使用off()移除事件等。" 83858103,7799194,快速接入智能客服机器人教程,"['前端开发', '人工智能', '客服系统', 'API集成', '网页开发']

摘要由CSDN通过智能技术生成

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>