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。

提前致谢。

Trevor Mills

Answer 1

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

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

这会将一个事件处理程序绑定到document并侦听click事件到bubble up并对其采取行动，如果该事件来自匹配的元素匹配选择器。

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

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

浏览器行为与巨大的doms

1 个答案: