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

【问题标题】：What's the best approach to attach events in jquery在 jquery 中附加事件的最佳方法是什么
【发布时间】：2014-10-14 15:18:20
【问题描述】：

我在弄乱我的一个朋友的代码，我发现他喜欢使用这样的大多数事件：

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

我喜欢使用这种形式：

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

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

【问题讨论】：

完全看情况。您越具体，需要在链上传播以产生影响的事件就越少（性能也略好一些）。您越不具体，与动态添加/删除的 html 节点的兼容性就越高。

标签： jquery events element document

【解决方案1】：

视情况而定。

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

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

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

对此，我的主观规则很简单：在事件相关的最外层处理事件。有时是document，但大多数时候它位于一个更接近我正在使用的容器中——小部件、表格或内容部分等的最外层元素。

【讨论】：

感谢指正，我编辑了帖子。也感谢这个令人难以置信的答案，我想我会继续为不同的部分使用一个共同的父母。

【解决方案2】：

您需要尽可能具体...这将限制需要评估的选择器的数量。

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

【讨论】：