jQuery中的.bind()、.live()和.delegate()之间区别分析


Posted in Javascript onJune 08, 2011
DOM树

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
jQuery中的.bind()、.live()和.delegate()之间区别分析
事件冒泡(又称事件传播)
当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。
$('a').bind('click',function(){alert('that tickles!')})

因此一个单击操作会触发alert函数的执行。
jQuery中的.bind()、.live()和.delegate()之间区别分析
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
jQuery中的.bind()、.live()和.delegate()之间区别分析
在操纵DOM的语境中,document是根节点。
现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。
.bind()
$('a').bind('click',function(){alert('That tickles!');})

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a')元素,并把alert函数绑定到每个元素的click事件上。
.live()
$('a').live('click',function(){alert('That tickles!')})

JQuery把alert函数绑定到$(document)元素上,并使用'click'和'a'作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与'a'这一CSS选择器是否匹配,如果都是的话,则执行函数。
live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:
$('a',$('#container')[0]).live('click',function(){alert('That tickles!')})

.delegate()
$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery扫描文档查找$('#container'),并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS'er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。
为什么.delegate()要比.live()好用
基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

$('a').live('click', function() { blah() });


$(document).delegate('a', 'click', function() { blah() });
后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a')元素,把它们存成jQuery对象。尽管live函数仅需要把'a'作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。

而另一方面,delegate方法仅需要查找并存储$(document)元素。
一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力
live函数也挺令人费解的。想想看,它被链到$(‘a')对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a',…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。
仅支持CSS选择器
最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。
欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。
更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。
为什么选择.live()或.delegate()而不是.bind()
毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
2. 如果你运行了$('a').bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
3. 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。
停止传播
最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:
$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
)

不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。
Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 #Javascript
精通Javascript系列之数据类型 字符串
Jun 08 #Javascript
精通Javascript系列之Javascript基础篇
Jun 07 #Javascript
精通Javascript系列之数值计算
Jun 07 #Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 #Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 #Javascript
JqGrid web打印实现代码
May 31 #Javascript
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python开发利器之ulipad的使用实践
2017/03/16 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python中if有多个条件处理方法
2020/02/26 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
软件测试工程师笔试题带答案
2015/03/27 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
出纳会计岗位职责
2014/03/12 职场文书
新品发布会主持词
2014/04/02 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL