jQuery事件绑定on()、bind()与delegate() 方法详解


Posted in Javascript onJune 03, 2015

啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结。

之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的。

jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用。所以这里我们主要就看下以下三个方法:bind()、delegate()、on()

我们准备一个html页面,用于各种类型事件绑定的测试。

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
  <button id="btn">添加新的p元素</button>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
  <p>第四个p元素</p>
  <p>第五个p元素</p>
</div>

<script>
$("#btn").click(function(){
  $("div").append("<p>这是一个新的p元素</p>");
});
</script>

</body>
</html>

一个简单的页面,放置了一个div,div里面若干个p元素和一个按钮,点击按钮可以追加p元素。我们下面将对页面上的p元素绑定click事件。

bind()

用法

$("div p").bind("click", function () {

    alert($(this).text());

})

这样就为所有div里的p元素都绑定了click事件,响应为弹出其内容。绑定很简单快捷,但是这里有两个问题:
第一个问题,这里用了隐式迭代的方法,如果匹配到的元素特别多的时候,比如如果我在div里放了50个p元素,就得执行绑定50次。对于大量元素来说,影响到了性能。
但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
第二个问题,对于尚未存在的元素,无法绑定。点击页面上的按钮,将动态添加一个p元素,点击这个p元素,会发现没有动作响应。
用delegate方法就可以解决这两个问题了。

另外提一下,bind()方法还有一种简写方式,上面的代码还可以换成:

$("div p").click(function () {

    alert($(this).text());

})

delegate()

用法

$("div").delegate("p", "click", function () {

    alert($(this).text());

});

这种方式采用了事件委托的概念。不是直接为p元素绑定事件,而是为其父元素(或祖先元素也可)绑定事件,当在div内任意元素上点击时,事件会一层层从event target向上冒泡,直至到达你为其绑定事件的元素,如此例中的div元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。

这样就解决了用bind()方法的上面两个问题,不用再一个个地去为p元素绑定事件,也可以为动态添加进来的p元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。

这样,绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。

on()

on()其实是将以前的绑定事件方法作了统一,查看jQuery无压缩的源码(我这里看的版本是1.11.3),可以发现无论bind()还是delegate()其实都是通过on()方法实现的,只是参数不同罢了。

 

 bind: function( types, data, fn ) {

     return this.on( types, null, data, fn );

    },

    unbind: function( types, fn ) {

     return this.off( types, null, fn );

    },

    delegate: function( selector, types, data, fn ) {

     return this.on( types, selector, data, fn );

    }

    undelegate: function( selector, types, fn ) {

 // ( namespace ) or ( selector, types [, fn] )

     return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );

    }

上面的例子中,用on()可以作如下绑定:

$("div").on("click","p",function(){

    alert($(this).text());

})

官方文档建议:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

尽量使用on()来绑定事件。

移除事件

对应于bind()、delegate()和on()绑定方法,其移除事件的方法分别为:

$( "div p" ).unbind( "click", handler );

$( "div" ).undelegate( "p", "click", handler );

$( "div" ).off( "click", "p", handler );

除了像上面这样移除指定的事件绑定之外,还可以不传入参数,移除所有事件绑定,这里就不一一列出了,jQuery的官方文档写得非常详细。

总结

1.选择器匹配到的元素比较多时,不要用bind()迭代绑定

2.用id选择器时,可以用bind()

3.需要给动态添加的元素绑定时,用delegate()或者on()

4.用delegate()和on()方法,dom树不要太深

5.尽量使用on()

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
layui的table中显示图片方法
Aug 17 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 #Javascript
浅谈javascript中基本包装类型
Jun 03 #Javascript
js中函数声明与函数表达式
Jun 03 #Javascript
JavaScript基本语法讲解
Jun 03 #Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 #Javascript
ECMAScript中函数function类型
Jun 03 #Javascript
JavaScript运算符小结
Jun 03 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
重新认识php array_merge函数
2014/08/31 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Javascript继承机制详解
2017/05/30 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
详解C++编程中一元运算符的重载
2016/01/19 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
一些Solaris面试题
2015/12/22 面试题
网站设计师的岗位职责
2013/11/21 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
个人工作表现自我评价
2015/03/06 职场文书
人工作失职检讨书
2015/05/05 职场文书