javascript - 具有巨大 dom 的浏览器行为

Question

谁能说说不同浏览器如何处理以下内容:

想象一个 HTML 文档，本质上呈现具有大量数据的静态应用程序的内容。

<div class="abundant_class">
    <div class="abundant_class">
        <div class="abundant_class"></div>
        <div class="abundant_class"></div>
        ...
    </div>       
    <div class="abundant_class">...</div>
    <div class="abundant_class">...</div>
    ...
</div>

想象一下文档中有 O(1000) 个这样的元素。

将点击事件分配给所有这些元素的最快方法是什么？

• <div class="abundant_class" onclick="javascript:foo()">
• $('.abundant_class').click(function(foo();));
• $('div').click(function(){if ($(this).hasClass('abundant_class')){foo();}
• 还有别的吗？

我特别想知道这些选择会产生多少内存和 CPU。

提前致谢。

特雷弗·米尔斯

Answer 1

在这种情况下使用 .live()或 .delegate() ，您将负载从初始绑定(bind)转移到事件冒泡(无论如何都会发生)，如下所示:

$('div.abundant_class').live('click', function() {
  foo();
});

这会将 一个 事件处理程序绑定(bind)到 document 并监听 click 事件到 bubble up如果事件冒泡的元素与选择器匹配，并据此采取行动。

根据评论讨论，这是非常优化的版本:

$(document.body).delegate('div.abundant_class', 'click', function() {
  foo();
});