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

转载 2015年11月18日 15:24:58

jQuery中的.bind()、.live()和.delegate()之间区别分析,学习jquery的朋友可以参考下。

DOM树

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:
事件冒泡(又称事件传播)
当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。
复制代码 代码如下:

$('a').bind('click',function(){alert('that tickles!')})

因此一个单击操作会触发alert函数的执行。
click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。
在操纵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()的处理函数早已运行了。

原文链接:http://www.jb51.net/article/27309.htm

关于jquery的事件委托-bind,live,delegate,on的区别发展

事件委托:让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! .bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。 jQuery 1.3新增的.liv...
  • yummy_go
  • yummy_go
  • 2016年02月15日 11:55
  • 1879

Web前端面试指导(二十五):谈一下Jquery中的bind,live,delegate,on的区别?

题目点评 该题难度不是很大,主要考察我们的叙述能力,对这些事件是否能够全面、系统的理解,以及表达的思路是否清晰。 解题思路 bind:把事件绑定到每一个匹配的元素上,主要特点 1.兼容性比较好...
  • lxcao
  • lxcao
  • 2016年10月04日 19:35
  • 2041

jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别

.bind(), .live(), 和 .delegate()之间的区别并不明显。但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug。 基础 D...
  • helloliuhai
  • helloliuhai
  • 2014年02月26日 17:00
  • 4332

JQuery中的bind、delegate、on、live方法的区别及简单介绍

Bind()方法: 给元素绑定事件 形式: .bind(eventType[,eventData],handler(eventObject)) eventType,string类型,一个或多个DOM事...
  • woshismyawei
  • woshismyawei
  • 2014年02月14日 16:26
  • 2167

详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

转载自: 我见过很多开发者很困惑关于jQuery中的.bind(), .live(), .delegate() 和 .on() 的使用以及它们的不同。 如果你没有耐心或者只想看到总结的话,...
  • hi_kevin
  • hi_kevin
  • 2014年07月14日 11:10
  • 2791

jQuery Mobile 的.bind()、.live()和.delegate()之间区别

摘要:jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及...
  • u013406800
  • u013406800
  • 2014年08月22日 10:30
  • 524

jQuery的事件委托方法on、live、delegate之间有什么区别?

jQuery的事件委托方法on、live、delegate之间有什么区别? 首先什么是事件委派? 事件委派(委托): 事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,...
  • xuxu_qkz
  • xuxu_qkz
  • 2017年10月25日 16:48
  • 588

jquery中的bind(),live(),delegate(),on()绑定事件方式

DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="...
  • qq_36263601
  • qq_36263601
  • 2017年05月18日 11:21
  • 381

jQuery中bind与live的用法与区别

首先介绍这两个方法之前,我们常用的是click()方法 $("a").click(function() { alert("hello"); }); click()方法是bind()方法的一种...
  • itmyhome
  • itmyhome
  • 2013年12月18日 19:49
  • 4452

jQuery,使用on代替delegate,live 写法区别

早期对页面上后期加载的动态元素,赋事件或值的时候,是使用live的.  由于效率比较低(其实数据不多也感觉不出来),后面使用delegate委托来代替了,再后面,1.7以后使用on 来代替delega...
  • itchiang
  • itchiang
  • 2014年03月20日 09:58
  • 13600
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery中的.bind()、.live()和.delegate()之间区别分析
举报原因:
原因补充:

(最多只允许输入30个字)