使用jQuery的on（）函数的性能差异

Question

我只是想知道哪种方式更有效率，或者这项操作的成本是否有任何差异......

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

VS

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

我知道如果在执行ready函数后ID为“lol”的元素被附加到DOM，后者将无效。我只是采用实现方式A作为最佳实践，因为它保持所有事件代码相同，而不管我所针对的元素。所以我想知道使用选项A是否有不利之处？

Answer 1

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

来自on() docs（强调我的）：

  

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

Answer 2

@ j08691的答案在页面上有一个或几个元素的情况下是完美的，但是如果我们将click事件绑定到页面上的数千个元素，就像具有数百行的表的所有TD元素一样，那么第二个选项会更慢，因为jquery同时监听1000个事件，但第一个选项只侦听一个事件，即单击正文。 请在 .on（）文档中查看委派活动的好处： http://api.jquery.com/on/

  

除了能够处理后代元素的事件外   尚未创建，委托事件的另一个优势是他们的   当许多元素必须存在时，开销要低得多   监控。在此示例中，在其tbody中包含1,000行的数据表中   将处理程序附加到1,000个元素：