在jQuery中监听文档级别的事件是否有任何缺点？ [英] Are there any drawbacks to listen events on document level in jQuery?

问题描述

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

To listen events on elements, I think to listen on document level:

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

优于在元素级别上收听的风格：

is better than the style to listen on element level:

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

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

The reason is the first style could apply to dynamically added new elements as well. You can also see this style used a lot in Bootstrap: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js

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

I would like to use the first style extensively. But I wonder if there are any drawbacks of this style, say performance?

推荐答案

从这里提供的jQuery文档中：

活动表现

在大多数情况下，活动例如单击不经常发生，性能不是一个重要问题。但是， mousemove 或滚动等高频事件每秒会发射几十次，在这种情况下它会变成明智地使用事件更重要。通过减少处理程序本身的工作量，缓存处理程序所需的信息而不是重新计算它，或者通过使用 setTimeout 。

Event performance

In most cases, an event such as click occurs infrequently and performance is not a significant concern. However, high frequency events such as mousemove or scroll can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using setTimeout.

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

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

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

jQuery can process simple selectors of the form tag#id.class very quickly when they are used to filter delegated events. So, "#myForm", "a.external", and "button" are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of $("body").on("click", "#commentForm .addNew", addComment) use $("#commentForm").on("click", ".addNew", addComment).

这篇关于在jQuery中监听文档级别的事件是否有任何缺点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！