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对象进行委派，而是建议在页面加载时使用最近的父对象。

Here是on()的文档。

Answer 2

事实并非如此。

这两行完全是两件事。

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

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

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

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

请阅读on docs：

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

对此没有任何“推荐”。第一个片段设置了“委托”事件，后者是“直接”事件。 documentation for 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();

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

6 个答案: