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

jQuery中的.bind()、.live()和.delegate()之间区别分析作者： 字体：[增加减小] 类型：转载 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这一根上。精明的JSer们可能会做出这样的结论，即$(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()