`
kylines
  • 浏览: 86005 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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

阅读更多

基本要素

 

jQuery 

 

 

DOM树

 

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:

jQuery

 

事件冒泡(又称事件传播)

 

当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

$('a').bind('click', function() { alert("That tickles!") }); 

 

因此一个单击操作会触发alert函数的执行。

jQuery

 

click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

jQuery

 

在操纵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(...); 

 

.delegate()

 

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

 

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

可以注意到,这一过程与.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:

Ÿ 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

Ÿ 如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

Ÿ 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

 

停止传播

 

最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

$('a').bind('click', function(e) {  
e.preventDefault();  
// 或者  
e.stopPropagation();  
});  

 

不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。(转自http://developer.51cto.com/art/201103/249694.htm

分享到:
评论

相关推荐

    Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...

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

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

    jQuery中bind(),live(),delegate

    jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解共8页.pdf.zip

    jQuery:bind() delegate() live()事件绑定

    jQuery:bind() delegate() live()事件绑定

    jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望...

    jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如...

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    读jQuery之十 事件模块概述

    如下 1 添加事件(bind/one/live/delegate/hover/toggle) bind 基本的添加事件函数。 one 添加只执行一次的事件函数。 live 事件代理(使用document代理)。 delegate 事件代理(使用指定元素代理)。 hover 模拟css...

    jquery中绑定事件的异同

    谈论jquery中bind(),live(),delegate(),on()绑定事件方式 1. Bind() $(selector).bind(event,data,function) Event:必须项;添加到元素的一个或多个事件。 Data:可选;需要传递的参数 Function:必需;当绑定事件发生...

    jquery插件使用方法大全

    由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。 用jq的前提,首先要引用一个有jq的文件 [removed][removed] 这个是jquery官方最新的地址。可用在自己网站...

    jQuery中 delegate使用的问题

    支持为动态生成的标签元素绑定事件也许就live和delegate了吧,不过新版本已经不支持live了,只有delegate delegate真的比较特殊呀,不同于其他事件绑定的风格。 就因为习惯了之前的bind风格..栽了跟头 简单的说就是...

    Query中click(),bind(),live(),delegate()的区别

    click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。 1.click()方法是我们经常使用的单击事件方法: 代码如下:$(“a”).click(function(){ ...

    关于Jquery中的事件绑定总结

    因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出、...

    jquery事件代理方式的区别联系

    事件冒泡的介绍,live delegate bind 的简介及区别。

Global site tag (gtag.js) - Google Analytics