在jquery中附加事件的最佳方法是什么

Question

我正在弄乱我的一个朋友代码，我发现他喜欢使用这样的大部分活动：

$(document).on(event,selector,function());

我喜欢使用这种形式：

$(elementParent).on(event,selector,function());

区别很明显，他喜欢将事件附加到文档中，我喜欢将它们发送给父母。问题是，哪种方式更有效，更合乎逻辑或更好？

Answer 1

取决于。

无论哪种方式，您都在使用事件委派，这意味着理论上，直接连接的处理程序可能会妨碍您。如果A）没有直接连接的处理程序，或者B）你希望它们妨碍/跳转队列，那么这很好。

就效率而言，我非常怀疑大多数活动有任何显着差异。也许有一个触发很多的事件，比如mousemove，您可能需要注意看是否有滞后，如果是，请将处理程序移近实际元素。此外，由于jQuery每个元素为每个事件附加一个处理程序，然后从那里执行自己的调度，理论上，document 上的批次处理程序可能开始慢一点。但通常的建议是担心如果/当你看到实际问题时。使用现代JavaScript引擎，我的猜测（这是一个猜测）是你需要一个 很多 的document附加的处理程序，然后才开始注意到问题。

在文档级别处理它们意味着您有一个更广泛的表面来向（整个文档）添加元素并让它们被处理程序覆盖。有时这很好。其他时候它没有意义。例如：如果您有一个与特定表相关的事件的处理程序，那么在文档级别处理这些事件是没有意义的，因为......它们是特定于表的。

我对此的规则很主观，很简单：在与其相关的最外层处理事件。有时这是document，但大多数情况下，它在容器上更接近我正在使用的容器 - 窗口小部件的最外层元素，或表格，或内容部分等。

Answer 2

你需要像你一样具体......这将限制需要评估的选择器的数量。

以附加到文档对象的委托点击事件处理程序为例。这将需要任何单击事件来评估传递的选择器以确定是否触发处理程序。但是如果你已经定位了一个更具体的元素，那么只有那些在附加的处理程序中发生的点击事件才会调用选择器评估。