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 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
php 全局变量范围分析
2009/08/07 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
python实现对输入的密文加密
2019/03/20 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
诚信考试承诺书
2014/03/27 职场文书
诚信考试倡议书
2014/04/15 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
win10下go mod配置方式
2021/04/25 Golang
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS