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

最新推荐文章于 2022-09-02 10:14:08 发布

转载最新推荐文章于 2022-09-02 10:14:08 发布 · 1.1k 阅读

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文详细解释了事件委托的概念及其实现原理，并对比了三种不同的事件绑定方法：.bind()、.live() 和 .delegate() 的特点与适用场景。

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

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

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

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

.bind()

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

.live()

JQuery把alert函数绑定到$(document)元素上，并使用'click'和'a'作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与'a'这一CSS选择器是否匹配，如果都是的话，则执行函数。jQuery从1.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已经完全可用了。