我应该将我的 .on('click') 事件附加到文档还是元素上？

Question

昨天我在阅读jQuery的.on()文档时看到了以下内容：

避免在大型文档中使用document或document.body来委托事件

但今天，我看了这个JSPERF，发现当单击事件被附加到document时，性能更好。

所以现在我感到困惑。性能测试是否与文档相矛盾？

- Gigi2m02

---

点击事件附加到$link，文档只是事件目标的侦听器。 - z1m.in

Answer 1

你的JSPerf测试了事件附加速度，而不是它们对于页面性能的累积影响。这是错误的测试方式！

Javascript事件会一直向上传递到文档根节点。这意味着如果你在文档上有一个“on（'click'，...）”处理程序，那么文档中每个元素的每次点击都将运行事件处理程序，因此jQuery可以测试其源是否与委托目标匹配，以确定是否应将其传递给该事件处理程序。

想象一下，你的页面在文档上有10个不同的委托事件处理程序，分别处理各种点击事件。每次你点击页面中的任何元素，事件都会冒泡到文档根节点，并且所有这10个处理程序都必须进行测试以确定应该运行哪个（如果有的话）。

一般来说，你希望你的委托事件尽可能深地放置在树中，同时仍然使功能可用，因为这限制了可能调用此事件的元素数量，并且你可以更早地处理事件以防止其向上传播到DOM树。

- Chris Heald

Answer 2

这要看情况。 当然，你可以将处理程序附加到任何你想要的元素上，在某些情况下，你必须将其附加到document或body（例如，如果你想要针对页面上的所有链接）。但是，如果你确定某些元素始终只出现在给定元素内（已经创建），为了性能考虑，你可以将事件处理程序附加到该公共父元素。

- mishik

Answer 3

重点在于过度。

依我之见，任何DOM上的过度委托都是糟糕的。

- rhapsodyn