事件绑定方法和性能$(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){ });`

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

- Mayank Gupta

---

扔掉最后两个被废弃的（且奇怪的）版本。然后在前两个版本之间 - 它们不相同，因此不应该进行比较。 - dfsq

第一和第二个完全有不同的目的。这取决于你如何操作DOM。1. 动态DOM 2. 静态DOM。 - Shaunak D

它们都为ID为某个元素的点击事件绑定了一个处理函数。我需要对它们进行全面的解释 :-p - Mayank Gupta

有一个致力于这类事情的网站。你应该创建一个新的性能评估，然后使用几个不同的浏览器运行它。如果你想要解释，最好的办法是阅读文档（它们通常会提供一些细节）或阅读源代码并找出发生了什么差异。 - Brandon Buck

感谢您提供的 http://jsperf.com/ 链接，Brand :-) - Mayank Gupta

Answer 1

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

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

这种绑定事件的方式叫做 事件委托，是在文档或静态父元素（比如 body）上绑定事件，而不是在特定元素上绑定。这种情况通常用于动态 DOM 操作。一个很好的例子是，想象一种情况，你想要将事件绑定到一个可能在页面加载时不存在但会在后期通过远程加载或动态 DOM 操作引入到 DOM 中的 DOM 元素上。如果你在元素被引入到 DOM 后立即为其绑定事件，你的代码就不够简洁。因此，在这种情况下，我们使用上述方法来最初绑定事件，这样我们就不必担心在绑定发生时元素是否存在。这里点击事件被绑定到文档，然后委托给指定的元素。由于这是绑定到文档或静态父元素上的，事件传播时间会更长，即 事件传播速度较慢，与第二种方法相比。但是这是首选的方法。

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

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

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

3. $("#id").die('click').live("click",function(e){ }); 和
4. $("#id").live("click",function(e){ }); 在 jQuery 1.7 中被弃用，在 jQuery 1.9 中被删除。

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

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

Method 2 > Method 1 > Method 3 & 4

但是方法 1仍然是首选方法。

- Sony Mathew

Answer 2

请忽略最后两个示例，因为它们已经失效了。而前两个示例可以根据您编码时所处的上下文来决定。第一个示例是事件委托。因此，您可以在处理运行时创建的元素时使用它。在使用事件委托时，必须提供立即静态父级而非document以获得更好的性能。第二个示例是常见的示例，但在处理动态元素时无法使用。可能需要在将动态元素插入到DOM之后使用它。但事件委托是首选。

- Rajaprabhu Aravindasamy

---

事件委托是否也适用于静态DOM？它对性能有何影响？ - Mayank Gupta

@MayankGupta 在使用静态dom元素时，使用事件委托没有意义。因为事件委托会监视事件冒泡来触发事件。而在使用静态元素时，监视事件冒泡是没有用的。 - Rajaprabhu Aravindasamy

Answer 3

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

最理想的情况是最好的

- anshuVersatile

---

你为什么这样想？ - Ram

它对于动态创建的元素以及静态元素都非常有用 :) - anshuVersatile

对性能有任何影响吗？您能否建议一个链接，以便我们可以看到在使用事件委托时，在DOM中没有元素的情况下会发生什么。 - Mayank Gupta

它不是最好的，它是不同的。你不能说第一个比第二个更好，因为它们有不同的目的。 - dfsq

考虑在您的回答中添加更多细节，仅仅说某个特定选项是最好的不能被视为答案。 - Mox Shah

在Intel XDK（HTML5移动开发SDK）文档中明确提到事件委托可以提高性能并减少错误的机会，这是移动应用程序所需要的 :) - anshuVersatile