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

Posted 2023-05-09

【中文标题】事件绑定方法和性能 $(document).on("click", "#id", fn) VS $("#id").on("click", fn) [关闭]

【英文标题】：Event Binding Methods & Performance $(document).on("click", "#id", fn) VS $("#id").on("click", fn) [closed]

【发布时间】：2015-06-20 23:14:41

【问题描述】：

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

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

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

【问题讨论】：

丢弃最后两个已弃用（和奇怪）的版本。然后在前两个之间 - 它们不一样，所以不应该比较。

前两个目的完全不同。取决于你如何操纵dom。 1.动态Dom 2.静态Dom。

它们都为 id 为 ID 的元素绑定了一个点击事件。我需要对它们进行完整的解释：-p

“我需要对所有这些都进行全面解释” - 那么你的问题对于这个网站来说太宽泛了。

有一个website 专门用于此类事情。您应该创建一个新的 perf review，然后使用几个不同的浏览器运行它。如果你想要一个解释，最好的办法是阅读文档（他们经常在那里提供一些细节）或阅读源代码并找出发生了什么差异。

【参考方案1】：

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

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

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

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

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

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

$("#id").die('click').live("click",function(e) ); 和 $("#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 仍然是首选方法。

【参考方案2】：

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

【讨论】：

是否也建议对静态 DOM 进行事件委托.. 对性能有什么影响..？

@MayankGupta 在静态 dom 元素上使用事件委托毫无意义。由于事件委托对事件冒泡进行了监视以触发事件。当我们使用静态事件时，观察事件冒泡是没有用的。

【参考方案3】：

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

是最好的

【讨论】：

你为什么这么认为？

它对于动态创建的元素以及静态元素也很有用:)

对性能的任何影响.. 你能建议一个链接，让我们可以看到内部究竟发生了什么，因为使用事件委托事件是在 DOM 中没有元素的情况下创建的。

这不是最好的。这不一样。你不能说第一个比第二个更好，因为它们的用途不同。

考虑在你的答案中添加更多细节，只是说特别是最好的不能被视为答案。