性能差（）函数

Question

我只是想知道哪种方法更有效，或者是否有VS在这种操作的成本有什么区别...

A) $(document).on('click', '#lol', function(){alert('hello')}) 

B) $('#lol').on('click', function(){alert('hello')}) 

我知道如果在执行ready函数后，ID为'lol'的元素被附加到DOM，后者将无法工作。我只是将采用实现A的方式作为最佳实践，因为无论我定位的元素如何，它都会保持所有事件代码相同。所以我想知道使用选项A总是有缺点吗？

Answer 1

是的，您应该尽可能不要使用document，而应使用更接近目标的元素。

从on() docs（重点煤矿）：

附加附近的文档 树的顶部许多委派的事件处理程序会降低性能。每次事件发生时，jQuery必须 将该类型的所有附加事件的所有选择器与从事件目标到 文档顶部的路径中的每个 元素进行比较。 为了获得最佳性能，请将文档 位置处的委派事件附加到尽可能靠近目标元素的位置。避免过度使用 文档或document.body来处理大型 文档上的委派事件。

Answer 2

@ j08691的答案是在一个或网页上的几个要素的情况下完美的，但如果我们结合点击页面上的事件，成千上万的元素，像有数百行的表中的所有TD元素，然后第二个选项会比较慢，因为jquery同时在监听1000个事件，但第一个选项只监听一个事件，那就是主体的点击。 请看一看的委派事件好处。对（）文档在这里： http://api.jquery.com/on/

除了他们来处理后代元素事件的能力 尚未创建，委派另一优势事件是他们的 潜在的低得多的开销，当许多元素必须 监测。与在其TBODY 1000行数据表中，这个例子 附加一个处理程序，以1000元：