4

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

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){ });`

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

4

3 回答 3

4

TLTR 下面给出所有上述指定方法的解释。

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

这种event delegation在文档或静态父元素（比如body) 而不是在动态 DOM 操作的情况下完成特定的特定元素。一个很好的例子是，考虑这样一种情况，您希望将事件绑定到页面加载时可能不存在的 DOM 元素，但稍后将通过远程加载或动态 DOM 将其引入 DOM操纵。如果您在新引入的元素被引入 DOM 之后立即为它绑定事件，那么您的代码将不整洁。所以在这种情况下，我们最初使用上述方法绑定事件，这样我们就不必担心绑定发生时元素是否存在。在这里，click 事件被绑定到文档，然后委托给指定的元素。由于 this 绑定到文档或静态父级，因此事件传播时间会更多，即与第二种方法相比，事件传播会很慢。But this is the preferred way of doing it.

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

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

由于第一种绑定是在文档上完成的，因此与将事件直接绑定到特定元素的第二种绑定相比，它会很慢。

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

“由于所有.live()事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径。” - 引用自https://api.jquery.com/live/。

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

Method 2 > Method 1 > Method 3 & 4

但仍然Method 1是首选方法。

于 2015-04-15T06:38:48.277 回答
2

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

于 2015-04-15T06:10:19.400 回答
-2 
$(document).on("click", "#id", function (e) {   });

理想情况下是最好的

于 2015-04-15T06:10:41.650 回答