在（）上使用jQuery时，为什么要使用（document）与元素本身？

Question

我想用一个jQuery专家来解释为什么$（文档）标识符被其他人推荐用于jQuery的on（）语句而不仅仅是使用元素本身

示例1：为什么在这里使用$（document）比Example＃2更好？

$(document).on("click", ".areaCodeList a", function(){
    // do stuff
});

示例2：与示例1相比，为什么使用这种方式考虑不好的做法？

$(".areaCodeList a").on("click", function(){
    // do stuff
});

Answer 1

这两个都是有效的。

前者适用于动态添加的元素。 您使用document是因为您要委托文档对象的子项上的事件，因此事件会冒泡到文档级别。 选择最接近的父级（并且父级必须在加载时必须存在于页面上）也更方便。

后者仍然有效，并且是将事件简单地绑定到特定元素的首选方式。

我个人不建议通过document对象进行委派，而是建议在页面加载时使用最近的父对象。

以下是on()的文档。

Answer 2

这不是真的。

这两行完全是两件事。

第一行是具有".areaCodeList a"选择器的委托事件，而第二行是附加到".areaCodeList a"元素的事件。

委托事件将触发每个".areaCodeList a"元素，尽管它在执行该行时位于DOM中。

无论如何，根本不建议将委托事件附加到document中。 如live文档中所述：

由于所有.live（）事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径

请阅读on 文档 ：

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on（）时的页面上。 要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。 或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。 例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。
...
...

Answer 3

我认为你混淆了一些概念。 不建议绑定到document元素，但有时您希望这样做，例如将事件绑定到动态添加的元素。

所有这些看起来都不清楚，所以这是第一个直接使用类选择器并绑定click事件的示例，该元素在绑定事件后动态插入。 正如您所看到的那样，事件永远不会被触发，因为我们在绑定事件时选择了DOM中不存在的元素。 这相当于.click

现在看看第二个例子。 在这里，您可以看到我们将根元素定义为document 。 这意味着click事件将在DOM树中一直冒泡，然后如果单击的元素具有动态类，则触发。 这相当于.live

现在，如果在示例一中，在绑定事件时元素存在于DOM中，代码将正常工作，如您在此处所见。

话虽如此。 除了澄清上述行为的文档之外，这里有一个。

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on（）时页面上

所以，总之。 当您确定所选元素没有父元素时，请使用document元素，该元素在绑定事件时保证在DOM中。 如果存在父元素，则使用该元素而不是document元素。 通过这种方式，事件不必一直冒泡到document ，它只需要移动很短的距离。

Answer 4

关于这一点没有“推荐”。 第一个片段设置了“委托”事件，后者是“直接”事件。 on()的文档深入解释了这些内容。

当您需要侦听尚不存在的元素的事件时，委托事件是必要的 - 例如，在AJAX调用之后将动态创建的元素。 它们有时也可以在性能方面更好 - 您需要更少的内存来将“真实”事件处理程序附加到文档对象，而不是1000个按钮。

我会说，如果可以的话，最好使用直接事件处理程序，或者将委托事件附加到尽可能接近真实事件源的元素。 在文档对象上拥有所有事件处理程序可能对性能很糟糕 - 您必须匹配针对所有选择器触发的每个事件。 如果您需要阻止事件冒泡，也可能需要它 - 如果所有事件都记录在文档中，那么它们已经冒泡了。

Answer 5

实际上，在这种情况下最好的解决方案是不使用$(document)既不像$("selector")这样的特定元素。

最好的方法是使用元素的容器并在on函数中绑定元素选择器。 通过这样做，您可以避免不必要的事件冒泡到文档。

因此代码应如下所示：

$("this_is_the_container").on('event','my_element_selector',function(){
// do some stuff here
})

Answer 6

$(*selector*).on(*event*, function(){})

仅适用于脚本运行时已加载到页面中的元素。 如果将来会出现新元素，事件处理程序将无法正常工作。

$(document).on(*event*, *selector*, function(){} 

将执行事件处理程序，即使具有相同选择器的元素将在脚本运行后出现在页面上。

因此，如果您有一些元素，可以在随机时间后出现，请使用

$(document).on()

否则使用

$(*selector*).on();