Question

我有一个包含200个div的列表，

<div id="sId_1" class="sDiv"></div>
<div id="sId_2" class="sDiv"></div>
....
<div id="sId_200" class="sDiv"></div>.

以下哪两项更快？

-- each loop -- with i++;
    <div onclick="callSomeFunction('click');" id="sId_'+i+'" ></div> 
-- each loop --


-- each loop -- with i++;
    $('#sId_'+i+'').click( function (event) ....
-- each loop --


$('.sDiv').click( function (event) ......

这是第一个解决方案吗？因为jQuery在每个div的$ .cache中创建一个对象。

PS：是一个有超过1000个条目的对象是JavaScript的问题吗？

Answer 1

您可以使用事件委派将单个“智能”事件处理程序附加到合适的父容器：

$("#parent").delegate("div[id^='sId']", "click", function() {
    // do something
});

上述方法的优点：

只有一个事件处理程序。
可以附加到jQuery对象而不是选择器使.delegate调用可链接。
适用于未来的元素，例如通过JS / Ajax添加的元素。
您可以停止事件的传播/冒泡，因为它们只会冒泡到父级而不是document元素，就像.live一样。

参考：

http://api.jquery.com/delegate/

Answer 2

第一个是最快的，但它会花费你的尺寸页面。

第二个需要修复，因为你不会这样做100个div。

所以你可以让每个div成为一个你可以这样调用的类：

$(".divPRessable").click( ...

如果你要将div注入DOM（最慢），最后只会更快。

在jQuery中单击（）与live（）和onclick（很多div）

2 个答案: