现在的位置: 首页 > 综合 > 正文

jQuery中的.bind()、.live()和.delegate()分析

2017年08月21日 ⁄ 综合 ⁄ 共 1940字 ⁄ 字号 评论关闭

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

事件冒泡(又称事件传播)当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。利用事件传播(这里是冒泡)这个机制,就可以实现事件委托。具体来说,事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document

一个单击操作会触发alert函数的执行。click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它,在操纵DOM的语境中,document是根节点。


现在我们再来说明.bind().live().delegate()的不同之处

.bind()

这是最简单的绑定方法了。JQuery扫描文档找出所有的$('a')元素,并把alert函数绑定到每个元素的click事件上。注:其隐含意思,.bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。如果是Ajax过来的元素则无能为力,但是其胜在效率高


.live() 

JQueryalert函数绑定到$(document)元素上,并使用'click''a'作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与'a'这一CSS选择器是否匹配,如果都是的话,则执行函数。jQuery1.4开始支持在使用.live()方法时配合使用一个上下文参数:



.delegate() 

JQuery扫描文档查找$('#container'),并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。(注:如果监听父控件被移除,其响应事件也会失效)可见,.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下,也可以使用.live()


1、这句话是否正确?

   不完全正确,

如上面的代码,后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a')元素,把它们存成jQuery对象。尽管live函数仅需要把'a'作为串参数传递以用做之后的判断,但是$()函数并未知道被链接的方法将会是.live()。而另一方面,delegate方法仅需要查找并存储$(document)元素。一种解决的办法为,使用一种“早委托”的方式,如下:

在此,(function($){})(jQuery)是一个“立即执行的匿名函数”,构成了一个闭包,可以防止命名冲突。在匿名函数内部,$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意,使用这个hack时,脚本必须是在页面的head元素中执行的,意味着在$(document).reday()之外执行。之所以选择这个时机,因为这时候刚好document元素可用,而整个DOM还远未生成;如果把脚本放在结束的body标签前面,就没有意义了,因为那时候DOM已经完全可用了。

2、.live()相比.delegate()缺点有哪些?

  一、$()函数会找到当前页面中选择器匹配元素并创建jQuery对象,但在确认事件目标时却不用这个元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;

  二、默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;

  三、只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$(#infotable td).live…可以,但$(“#infotable).find(td).live…不行;

  四、收集选择器匹配元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。

3、.live()真的绑定在document上面吗?

   可以绝对的肯定。写一个样例,html代码为:

  测试代码:

其测试结果为: ccc > aaa > bbb,和预期相符合

参考文章:http://blog.csdn.net/zc2087/article/details/7287429 

          http://www.jb51.net/article/27309.htm

【上篇】
【下篇】

抱歉!评论已关闭.