事件委托需要多少元素才能变得有价值？答案

【问题标题】：How many elements does it take for event delegation to become worthwhile?事件委托需要多少元素才能变得有价值？
【发布时间】：2010-10-15 22:32:36
【问题描述】：

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

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

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

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

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

【问题讨论】：

我不知道事件委托的性能成本...它们是什么？事件无论如何都会冒泡，并且事件目标始终存储在事件对象的相应属性中。
@Sime 我想到的主要是每次触发事件时，必须运行委托调用中的选择器以检查它是否与事件目标匹配。可能还有其他人...
请考虑，当您使用委托时，您实际上是在页面生命周期内分散了绑定处理程序的成本。当您首先通过查找元素进行绑定时，您会在页面加载时添加更多工作，此时用户对延迟最为敏感。
你能贴出代码吗？我认为你有它倒退。
@vittore $('#el').delegate('a[href^=http://www.google.com]', 'click', func) 选择器a[href^=http://www.google.com] 将针对到达#el 的每个点击事件的目标运行，我相信。

标签： javascript jquery performance jquery-events event-delegation

【解决方案1】：

假设这个 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
});

【讨论】：

您的代表团中不需要e.stopPropagation(); 吗？
嗯，为什么？用户单击#navUL 元素内的某处。单击事件传播到#navUL 元素（因为没有附加到 A 或 LI 元素的单击处理程序）。在#navUL 点击处理程序中，我检查是否点击了锚点。如果没有，我只是终止事件（通过 return false;）。如果是的话，我会做我想做的（用锚）。我可能想阻止锚点的默认行为，但我不明白为什么要阻止点击事件在 DOM 树中冒泡（无论如何，我没有在祖先元素上设置任何点击处理程序）。
好的，我可以选择“总是”的答案。无论如何，它符合我所做的。谢谢。