在jQuery中监听文档级别的事件是否有任何缺点？

要听取元素上的事件，我想在文档层面上进行聆听：

$(document).on('click', '.myclass', function() {/*do something*/}); 

比元素级别的风格更好：

 $('.myclass').on('click', function() { /*do something*/ }); 

原因是第一种风格也适用于动态添加的新元素。 您还可以在Bootstrap中看到此样式使用了很多： https ： //github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

我想广泛使用第一种风格。 但是我想知道这种风格是否有任何缺点，比如性能？

Answer 1

从这里提供的jQuery文档：

活动表现

在大多数情况下， click事件很少发生，性能不是一个重要问题。 然而，诸如scroll或scroll类的高频事件每秒可以发射数十次，并且在这些情况下，明智地使用事件变得更加重要。 通过减少处理程序本身完成的工作量，缓存处理程序所需的信息而不是重新计算它，或者通过使用setTimeout限制实际页面更新的数量，可以提高性能。

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

当jQuery用于过滤委托事件时，它可以非常快速地处理表单tag#id.class简单选择器。 所以， "#myForm" ， "a.external"和"button"都是快速选择器。 使用更复杂的选择器（特别是分层选择器）的委托事件可能会慢几倍 – 尽管它们对于大多数应用程序来说仍然足够快。 通常可以通过将处理程序附加到文档中更合适的点来避免分层选择器。 例如，代替$("body").on("click", "#commentForm .addNew", addComment) $("#commentForm").on("click", ".addNew", addComment) $("body").on("click", "#commentForm .addNew", addComment)使用$("#commentForm").on("click", ".addNew", addComment) 。

Answer 2

如果.myclass是在您的文档中动态添加的，那么这就是您的喜好

$(document).on('click', '.myclass', function() {/*do something*/});

为了提高效率，请考虑这个 – （ 因为你想广泛使用第一种风格 ）

 
 
 // <-- added dynamically  

你可以这样做 –

$('.parentClass').on('click', '.myclass', function() {/*do something*/});

请参阅Api Docs – http://api.jquery.com/on/

Answer 3

将点击处理程序直接附加到元素本身的另一个好处是，Android似乎更喜欢它。 当触摸具有单击处理程序的元素时，移动浏览器将略微提示已激活某些内容，当处理程序附加到另一个元素时，它不会执行。

它似乎也更稳定。