10

阅读另一个关于 jQuery 性能的 Stack Overflow 问题后，我开始思考何时值得使用事件委托而不是单独绑定到元素。我主要考虑的是 jQuery，但我想它可能适用于一般的 Javascript。

事件委托有两个主要目的：

  1. 允许处理程序处理尚未创建/插入到 DOM 中的元素。
  2. 将一个函数绑定到一个共同的祖先元素而不是多个兄弟元素

我的问题是关于其中的第二个。一般的答案可能是“这取决于具体情况”，但我想知道是否有经验法则或基准测试方法来测试这一点。

所以，问题是：在事件委托的性能收益超过性能成本之前，您需要多少元素？

4

1 回答 1

3

假设这个 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 文档（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
});
于 2010-10-15T23:09:30.743 回答