问在()上使用jQuery时，为什么使用(document)而不是元素本身呢？

EN

这两个都是有效的。

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

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

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

Here是on()的文档。

这不是真的。

这两行代码做的是完全不同的事情。

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

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

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

由于所有.live()事件都附加在文档元素上，因此在处理事件之前，它们会采用尽可能长和最慢的路径

请阅读on docs

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

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

...

...

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

所有这一切似乎都不清楚，所以here是第一个直接使用类选择器并绑定单击事件的示例，该元素在事件绑定后动态插入。如您所见，该事件从未触发过，因为我们选择了一个在绑定事件时DOM中不存在的元素。这相当于一个.click

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

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

话虽如此。下面是一个来自docs的异常，它澄清了上面的行为。

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

所以，总结一下。如果您确定所选择的元素没有父元素，并且在绑定此事件时该元素肯定位于DOM中，则使用document元素。如果存在父元素，则使用该元素而不是document元素。这样，活动就不会一直在document上冒泡，它只需要走很短的距离。