8

要监听元素上的事件，我想在文档级别监听：

$(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

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

4

3 回答 3

17

从这里可用的 jQuery 文档：

活动表现

在大多数情况下，诸如click很少发生的事件和性能不是一个重要的问题。但是，高频事件（例如mousemoveorscroll每秒可以触发数十次），在这些情况下，明智地使用事件变得更加重要。性能可以通过减少处理程序本身完成的工作量、缓存处理程序所需的信息而不是重新计算它或通过使用setTimeout.

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

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

于 2013-05-05T11:01:55.310 回答
2

如果.myclass在您的文档中动态添加，这是您喜欢的

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

为了提高效率，请考虑这一点 - （因为您想广泛使用第一种样式）

<div class='parentClass'>
   <div class='myclass'></div>  // <-- added dynamically
</div>

你可以这样做 -

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

请参阅 Api 文档 - http://api.jquery.com/on/

于 2013-05-05T10:53:41.347 回答
1

直接在元素本身上附加点击处理程序的另一个优点是，Android 似乎更喜欢这样。当触摸具有单击处理程序的元素时，移动浏览器会给出一个轻微的提示，表明某些东西已被激活，而当处理程序附加到另一个元素时它不会这样做。

它的工作似乎也更加稳定。

于 2014-10-17T12:03:05.687 回答