为什么在jquery中将事件注册到文档是不好的做法？ [英] why it is bad practice to register events to document in jquery?

问题描述

每当我读到jquery中的事件注册时，他们都会说我们应该尝试将事件处理程序添加到最近的父级，并避免向文档添加事件侦听器，因为根据资源它们很慢且效率不高。

Whenever I read about event registration in jquery they all say that we should try to add event handlers to the nearest parent, and avoid adding event listeners to the document, because according to resources they are slow and not efficient.

但为什么他们很慢？显然，这是因为事件必须冒泡到文档，这需要时间。然后将它与要调用的选择器列表进行比较，例如

But why they are slow? Apparently it's because the event will have to bubble up to the document, which will take time. Then it will be compared to a list of selectors to call, e.g.

$(document).on("click", ".abc", function(){  })
$(document).on("click", ".abc2", function(){ })

所以这里如果我单击一个元素，click事件将冒泡到文档然后它将匹配选择器列表（。abc，.abc2） ......这是低效的。好的我明白了，但如果我在列表中只有一个选择器呢？例如

So here if I click an element, the click event will be bubble up to the document and then it will match the selector list (".abc, .abc2")...and that is inefficient. OK I got it but what if I have only have one selector in the list ? e.g.

$(document).on("click", "*", function(){  }) 

它会慢吗？如果是这样的原因？

Will it be slow too ? If so why?

基本上我正在尝试创建一个google的jsaction similer lib，所以我会这样写： -

Basically i'm trying to create a google's jsaction similer lib, so I will write like this:-

$(document).on("click", "[jsaction]", function(){  })

因为这将是唯一的选择器，所以我认为它不会很慢？或者它会是什么？

Because this will be the only selector, so i don't think it will be slow ? or will it be ?

如果将事件附加到文档效率不高，那么完全ajax应用程序怎么样？我的应用程序完全是ajax，每个页面都将由ajax下载。还有另一个更有效的解决方案吗？

and if attaching event to document is not efficient, then what about a completely ajax application? my application is completely ajax, and every page will be downloaded by ajax. Is there another, more efficient solution?

推荐答案

事件委托基本上使用2个不同的流程，

Event delegation basically uses 2 different process,

1. 事件冒泡，例如，当您点击元素时，
   事件将冒泡到文档以触发相关事件。


2. 匹配，在到达文档后（在事件冒泡期间）导致事件冒泡的
   伙伴将使用$ b进行验证附带文档的$ b选择器。如果它匹配则相关的
   事件将被解雇。

1. The event bubbling, For example, when you click over an element that event will be bubbled up to the document to fire the relevant event.
2. The match, after reaching the document(during event bubbling) the fellow who caused the event bubbling will be verified with the selectors attached with document. If it matches then the relevant event will be fired.

所以你提倡匹配通过声明一个通用选择器。坦率地说，匹配2或3个元素将比在事件冒泡期间遍历文档花费更少的时间。在这种情况下，如果您使用静态最接近的父级而不是文档，则遍历时间将减少，这将提高性能。

So you are advocating about the match by stating a generic selector. To be frank, matching 2 or 3 elements will take less time than traversing up to the document during event bubbling. At that case if you use a static closest parent instead of document, the traversing time will be reduced and that will hike the performance.

虽然匹配花费的时间较少，但是当它有15个以上的匹配元素时，即使你使用最近的父代替文档，这也会影响性能。

Though match takes less time, when it comes with 15+ elements for matching, that will also affect the performance even when you use closest parent instead of document.

所以摘要是，我们必须通过了解上述两个不同的过程，在常识下谨慎地使用事件委派。

So the summary is, we have to use event delegation sparingly with common sense by knowing the above two different process takes place under the hood.

这篇关于为什么在jquery中将事件注册到文档是不好的做法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！