谁能说说不同浏览器如何处理以下内容:
想象一个 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。
提前致谢。
特雷弗·米尔斯
最佳答案
在这种情况下使用 .live()
或 .delegate()
,您将负载从初始绑定(bind)转移到事件冒泡(无论如何都会发生),如下所示:
$('div.abundant_class').live('click', function() {
foo();
});
这会将 一个 事件处理程序绑定(bind)到 document
并监听 click
事件到 bubble up如果事件冒泡的元素与选择器匹配,并据此采取行动。
根据评论讨论,这是非常优化的版本:
$(document.body).delegate('div.abundant_class', 'click', function() {
foo();
});
关于javascript - 具有巨大 dom 的浏览器行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3859601/