javascript - JQuery 代码中使用的 CSS 类的事件监听器的性能开销

Question

如果我的标记如下所示:

<button id="button-1" class="nice">
<button id="button-2" class="nice">
<button id="button-3" class="nice">

我定义了以下 jQuery:

$(".nice").click(function () { 
    // something happens
});

1. 建立了多少事件监听器？ 1 还是 3？

2. 如果我有 1000 个按钮而不是 3 个，我应该改用事件委托(delegate)吗？

3. 如果这些类在标记中包含大量元素，那么从性能方面来说，最好不要定义对元素类的 jQuery 调用吗？

Answer 1

1) 3 个事件监听器都指向同一个函数。

2) 这取决于你想要完成什么

3) 尝试做一些基准测试，看看哪里的性能影响变得明显。我已经选择了多达 1000 个元素，然后同时对其进行动画处理 - 并且(在 FF 中)直到大约 600-700 个元素，性能影响才变得不明显。性能当然取决于浏览器和 JS 引擎。有些(Chrome)会比其他的(IE)更快。值得一提的是，对于该站点，我使用了与您在问题中使用的方法相同的方法。