事件绑定方法和性能 $(document).on("click", "#id", fn) VS $("#id").on("click", fn)

Question

以下哪一项在性能等方面更好，为什么？

1. `$(document).on("click", "#id", function (e) {   });` 
 
2. `$("#id").on("click", function (e) {   })`
   
3. `$("#id").die('click').live("click",function(e){ });`

4. `$("#id").live("click",function(e){ });`

如果我们使用事件委托，对性能有什么影响？我正在寻找深入的解释。

Answer 1

请忽略最后两个样本。因为那些已经死了。对于前两个示例，可以根据您正在编码的上下文来决定。第一个是 event delegation。因此您可以在处理运行期间创建的元素时使用它。在使用事件委托期间，必须提供直接静态父代来代替 document 以提高性能。第二个示例是一个普通示例，但在处理动态元素时无法合并。也许您可以在将动态元素插入 DOM 之后使用它。但首选事件委托。

Answer 2

$(document).on("click", "#id", function (e) {   });

最理想

Answer 3

TLTR 以上所有指定方法的解释如下。

$(document).on("click", "#id", function (e) { });

这种绑定事件的方式，称为 event delegation，在文档或静态父元素（比如 body）上，而不是在动态 [= 的情况下完成特定的特定元素52=] 操纵。一个很好的例子是，想一想你想将事件绑定到 DOM 元素的情况，该元素在页面加载时可能不存在，但稍后会被引入 DOM通过远程加载或通过动态 DOM 操作分阶段。如果在 DOM 中引入新元素后立即为新引入的元素绑定事件，您的代码将不会整洁。所以在这种情况下，我们使用上面的方法来初始绑定事件，这样我们就不必担心绑定时元素是否存在。这里点击事件绑定到文档，然后委托给指定的元素。由于这是绑定到文档或静态父级，因此与第二种方法相比，事件传播时间会更长，即事件传播会很慢。 But this is the preferred way of doing it.

$("#id").on("click", function (e) { })

这种绑定用于 DOM 不需要是静态的，但您指定的元素在您绑定事件时已经存在的情况。通常我们在静态 DOM 元素情况下这样做。唯一的问题是，只有当事件必须绑定到的特定元素已经存在于 DOM 中时，才能使用这种绑定。由于这是直接绑定并且不涉及任何委托 与方法 1 相比，事件传播将更快。

Since the first kind of binding is done on the document, it will be slow compared to the second one in which event is directly binded onto the specific element.

$("#id").die('click').live("click",function(e){ }); 和
$("#id").live("click",function(e){ }); 已在 jQuery 1.7 中弃用并在 jQuery 1.9.

"Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled." - Quoted from https://api.jquery.com/live/.

这是您问题的答案，哪种方法更快？

Method 2 > Method 1 > Method 3 & 4

但 Method 1 仍然是首选方法。

事件绑定方法和性能 $(document).on("click", "#id", fn) VS $("#id").on("click", fn)

Event Binding Methods & Performance $(document).on("click", "#id", fn) VS $("#id").on("click", fn)

javascript

jquery

dom

event-binding

jquery-events