我想用一个jQuery专家来解释为什么$（文档）标识符被其他人推荐用于jQuery的on（）语句而不仅仅是使用元素本身
示例1：为什么在这里使用$（document）比Example＃2更好？
$(document).on("click", ".areaCodeList a", function(){
// do stuff
});
示例2：与示例1相比，为什么使用这种方式考虑不好的做法？
$(".areaCodeList a").on("click", function(){
// do stuff
});
这两个都是有效的。
前者适用于动态添加的元素。您使用document是因为您要委托文档对象的子项上的事件，因此事件会冒泡到文档级别。选择最接近的父级（并且父级必须在加载时必须存在于页面上）也更方便。
后者仍然有效，并且是将事件简单地绑定到特定元素的首选方式。
我个人不建议通过document对象进行委派，而是建议在页面加载时使用最近的父对象。
Here是on()的文档。
这不是真的。
这两行完全是两件事。
第一行是带有".areaCodeList a"选择器的委托事件，而第二行是附加到".areaCodeList a"元素的事件。
委托事件将触发每个".areaCodeList a"元素，尽管在该行执行时它位于DOM中。
无论如何，不建议将委托事件附加到document。正如live文档中所写：
由于所有.live（）事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径
请阅读on docs：
事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。
委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。 ... ...
我认为你混淆了一些概念。不建议绑定到document元素，但有时您希望这样做，例如将事件绑定到动态添加的元素。
所有这些看起来都不清楚，所以here是第一个直接使用类选择器并绑定click事件的示例，该元素在绑定事件后动态插入。正如您所看到的那样，事件永远不会被触发，因为我们在绑定事件时选择了DOM中不存在的元素。这相当于一个.click
现在看看第二个例子。在这里，您看到我们将根元素定义为document。这意味着click事件将在DOM树中一直冒泡，然后如果单击的元素具有动态类，则触发。这相当于.live
现在，如果在示例一中，在绑定事件时元素存在于DOM中，代码就可以正常工作，因为你可以看到here。
话虽如此。除了docs之外，这里有一个澄清上述行为的内容。
事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上
所以，总之。当您确定您选择的元素没有父元素时，请使用document元素，该元素在绑定事件时保证在DOM中。如果存在父元素，则使用该元素而不是document元素。这样事件就不会在document上一直冒泡，它只需要短距离旅行。
关于这一点没有“推荐”。第一个片段设置了“委托”事件，后者是“直接”事件。 documentation for 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();