.on() 和 .click() 哪个更快？（涉及IT技术）

Question

如果我有一个包含删除记录链接的表格，那么连接点击事件的最佳方法是什么？这些方法在幕后是否评估相同？

$("#table").on("click", ".delete", function(){
   //do stuff
});

或者

$("#table .delete").click(function(){
   //do stuff
});

- Homer

---

对于赋值，on 比 click 更快，因为 click 在内部调用了 on。但我真的怀疑它是否会影响您应用程序的整体性能。针对这些问题，请查看源代码：https://github.com/jquery/jquery 这里更重要的是这些调用不是等价的。第一个仅附加一个事件处理程序并使用事件委托，而第二个则将事件处理程序附加到 #table 内的每个 .delete。 - Felix Kling

如果#table的内容发生了变化，比如从ajax重新加载，则使用on。 - Henesnarfel

如果在调用这些函数后添加额外的删除项，只有第一个会起作用。因为这里的点击事件会传递到表格，然后查找删除子项。而在第二个函数中，点击事件仅限于在调用函数时已经存在的删除项。 - QuentinUK

这就像问在C#中，int和string哪个更快，每种类型都有其用途... - gdoron

@gdoron...不是那样的... - jondavidjohn

Answer 1

不，它们不一样。

在你使用的方式中，.on() 可以通过委托事件来节省附加事件所需的计算资源和内存，并提供一个动态元素，使得事件也适用于未来的元素。

而 .click() 会显式地附加事件到每一个匹配的元素上，这样可以节省执行时的计算资源，但是实际情况下，这并不是瓶颈问题的首要解决方法。

你可以通过以下链接了解更多关于事件委托的测试：Read some testing with event delegation here... ，也可以了解如何附加事件处理程序的性能测试：Performance testing of attaching event handlers...

- jondavidjohn

---

执行时的时间不会产生任何显著的影响，因为与用户点击的速度相比，任何时间差都是微不足道的。 - QuentinUK

我在我的回答中已经表明了这一点。 - jondavidjohn

Answer 2

这就像问在C#中什么更快，int还是string。每种类型都有其用途...不是关于哪个更快，而是关于在什么情况下使用什么。 on允许您将事件附加到动态添加的元素，而click则不行。

如果您没有“动态添加的元素”，请使用click，否则请使用on。

- gdoron is supporting Monica

---

+1 只是因为说“重点不在于哪个更快，而在于什么时候使用哪个。” - T I

-1 与“int vs string”进行比较是不合适的。.on和.click可能存在巨大差异，考虑到.on替代了.delegate并取代了.live，我认为这不是一个坏问题，而且我认为任何经常使用.live的人都知道它有多慢。但是对于其余部分+2。 - Chris Stephens

Answer 3

click 比 on 更快，因为它直接将事件附加到元素上，而 on 则是将事件附加到 #table 上，并查找 .delete 元素以触发事件，因此在触发 click 事件之前需要执行一些代码。

虽然差异微不足道，但您不会看到任何区别。

如果您使用 on，则只需要一个事件处理程序即可处理 #table 内任意数量的 .delete 元素，而 click 将附加到每个 .delete 元素，因此从内存利用方面来说，on 更好。

- ShankarSangoli

---

连接事件时更快？还是触发事件时更快？ - jondavidjohn

我是指在触发事件的同时。 - ShankarSangoli

在哪里可以找到on比click更快地触发事件的说明？ - ShankarSangoli

Answer 4

在这种特定情况下，.click(...) 可能会更慢，因为它需要遍历与选择器匹配的每一行和每个单元格，并将处理程序函数附加到每个单元格。在这种特定情况下，on(...) 更快，因为它将处理程序附加到表而不是具有 .delete 类的每个元素。

话虽如此，在选择这两者之间时，您需要考虑一些事情：

1. 你的选择器有多复杂？如果你使用 $('#rootItem').on('click', '.foo .bar.baz .bum', function() { /* do stuff*/ })，那么它会比 $('#rootItem').on('click', '.foo', function() { /* do stuff*/ }) 慢，因为前者的选择器更加复杂。在这种情况下，可能更明智的做法是在附加时付出代价，并使用 click(...) 来节省运行时评估每个点击是否与选择器 '.foo .bar.baz .bum' 匹配的成本。像你所拥有的简单单类选择器（'.delete'）将表现得非常好。
2. 内容是否会动态更改？如果是，你需要对每个动态添加的项目调用 click(...)。 on(...) 函数可以更好地处理这个问题，只要你的“外部”选择器（在这种情况下为 '#table'）不指向将被动态添加的元素。将 '#table' 替换为 '.table'，并动态添加一个新的带有类 table 的表格，新添加的表格将不会从你最初调用 on(...) 附加事件处理程序。

- FMM