当使用jQuery on(）时，为什么要使用(document）与元素本身

这两者都是有效的。

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

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

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

以下是on()的文档。

这不是真的。

这两条线做了完全不同的事情。

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

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

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

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

请阅读on文档：

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

委派事件的优势在于，它们可以从以后添加到文档中的子元素。通过选择保证在已附加委托事件处理程序，可以使用委托事件避免了频繁附加和删除事件处理程序的需要。这元素可以是例如，如果事件处理程序希望监视文档中的所有冒泡事件。这个document元素在之前的文档标题中可用加载任何其他HTML，因此在没有等待文档准备就绪

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

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

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

现在，如果在示例一中，在绑定事件时元素存在于DOM中，那么代码将正常工作，正如您在这里看到的那样。

话虽如此。以下是文档中的一个例外，它澄清了上述行为。

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

所以，最后。当您确定所选元素没有保证在绑定事件时在DOM中的父元素时，请使用document元素。如果存在父元素，则使用该元素而不是document元素。这样，活动就不必一直在document上冒泡，只需要走很短的距离。

对此没有任何"推荐"之处。第一个片段设置了一个"委派"事件，后者是一个"直接"事件。on()的文档对此进行了深入的解释。

当您需要侦听还不存在的元素的事件时，委托事件是必要的，例如，AJAX调用后将动态创建这些元素。它们有时在性能方面也会更好——与1000个按钮相比，将"真实"事件处理程序附加到文档对象所需的内存更少。

我想说，在可能的情况下，最好还是使用直接事件处理程序，或者将委托事件附加到尽可能接近真实事件源的元素。将所有事件处理程序都放在文档对象上可能会影响性能——您必须将激发的每个事件与所有选择器相匹配。如果你需要阻止一个事件冒泡，也可能需要它——如果所有事件都被记录在文档中，那么它们已经冒泡了。

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

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

所以代码应该看起来像：

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

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

将仅适用于脚本运行时已加载到页面中的元素。如果将来，将出现新元素，则事件处理程序将不起作用。

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

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

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

$(document).on()

否则使用

$(*selector*).on();