阅读另一个关于jQuery性能的SO问题,我开始考虑到使用事件委托而不是单独绑定到元素时的重点.我主要是关于jQuery,但我想这可能适用于
Javascript一般.
事件委托有两个主要目的：
>允许处理程序处理尚未创建/插入DOM的元素.
>将一个函数绑定到一个共同的祖先元素而不是多个兄弟元素
我的问题是其中第二个.一般答案可能是“这取决于具体的情况”,但是我想知道是否有经验法则或基准测试方式来测试这一点.
解决方法
假设这个HTML结构：
<ul id="navUL">
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
</ul>
只是为了清除事情(对我来说)….根据jQuery docs(http://api.jquery.com/delegate/),这个：
$("#navUL").delegate("a","click",function(){
// anchor clicked
});
…相当于：
$("#navUL").each(function(){
$("a",this).live("click",function(){
// anchor clicked
});
});
然而,事件委托(据我所知)是这样的：
$("#navUL").click(function(e) {
if (e.target.nodeName !== "A") { return false; }
// anchor clicked
// anchor is referenced by e.target
});
所以你捕获UL元素上的点击事件,然后通过event.target属性找出实际点击哪个锚点.
我不知道delegate()方法,但是最后一个方法应该总是比将事件处理函数附加到#navUL元素中的每个锚点上更快,就像这样：
$("#navUL a").click(function() {
// anchor clicked
// anchor is referenced by the this value
});
