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

Question

要听取元素上的事件,我想在文档层面上倾听:

$(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不经常发生的事件和性能不是一个重要的问题.然而,诸如mousemove或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).