当在（）上使用jQuery时，为什么使用（document）与元素本身？
我想用一个jQuery专家用自己的话来解释为什么$（document）标识符被其他人推荐用于jQuery的on（）语句，而不是仅仅使用一个元素本身
例1：为什么在这里使用$（document）比例2更好？
$(document).on("click", ".areaCodeList a", function(){ // do stuff }); 示例2：考虑到与示例1相比不太好的做法，为什么以这种方式使用元素？
$(".areaCodeList a").on("click", function(){ // do stuff });
这两个都是有效的。
前者适用于dynamic添加的元素。 您使用document是因为您正在委托文档对象的子项上的事件，因此事件会冒泡到文档级别。 select最接近的父母也是更方便（并且父母必须在加载时存在于页面上）。
后者仍然有效，并且是将事件简单地绑定到特定元素的首选方法。
我个人不build议通过document对象委托，而是页面加载时存在的最接近的父对象。
这里是on()的文档。
这不是真的。
这两条线完全是两回事。
第一个是".areaCodeList a"select器的委托事件，而第二行是附加到".areaCodeList a"元素的事件。
委托事件将触发每个".areaCodeList a"元素，尽pipe当该行执行时它在DOM中。
无论如何，附加委托事件的document是不推荐的。 正如live文档所写：
由于所有.live（）事件都附加在文档元素处，因此事件在处理之前会采用最长和最慢的path
请阅读文档 ：
事件处理程序仅绑定到当前选定的元素; 它们必须在代码调用.on（）时存在于页面上。 为确保元素存在且可以select，请在文档就绪处理程序中为页面上的HTML标记中的元素执行事件绑定。 如果将新的HTML注入页面，请在将新的HTML放入页面后select元素并附加事件处理程序。 或者，使用委托事件来附加事件处理程序，如下所述。
委托事件的优点是，他们可以处理后来添加到文档中的后代元素的事件。 通过select在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。 该元素可以是模型 – 视图 – 控制器devise中的视图的容器元素，例如，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他HTML之前，文档元素在文档的头部是可用的，所以在那里附加事件而不用等待文档准备好是安全的。
…
…
我想你混淆了一些概念。 不build议绑定到文档元素，但是有时候您想要这样做，例如将事件绑定到dynamic添加的元素时。
所有这些可能看起来都不清楚，所以这里是第一个直接使用类select器并绑定click事件的例子，绑定事件后dynamic插入元素。 正如你所看到的，这个事件永远不会被解雇，因为我们select了一个事件绑定时DOM中不存在的元素。 这相当于一个.click
现在看第二个例子。 在这里，您会看到我们将根元素定义为document 。 这意味着点击事件会一直在DOM树上冒泡，然后在被点击的元素具有dynamic类时触发。 这相当于.live
现在，如果在示例一中，在绑定事件元素出现在DOM中时，代码将工作得很好，正如您在这里所看到的。
话虽如此。 这里有一个除了澄清上述行为的文档之外。
事件处理程序仅绑定到当前选定的元素; 他们必须在您的代码调用.on（）时在页面上存在
所以，总之。 当你确定在你绑定的事件被绑定的时候，你所select的元素没有父元素保证在DOM中的时候，使用document元素。 如果存在父元素，则使用该元素而不是document元素。 通过这种方式，事件不需要在document一路走下去，只需要很短的距离。
没有什么“build议”这一点。 第一个片段设置了一个“委托”事件，后者是一个“直接”事件。 on()的文档深入解释了这些。
当您需要监听尚不存在的元素的事件（例如，在AJAX调用之后dynamic创build的事件）时，委派事件是必需的。 他们有时也可能更好的性能 – 你需要更less的内存来连接一个“真实的”事件处理程序到文档对象，而不是1000个button。
我可以说，尽可能地使用直接事件处理程序还是可取的，或者尽可能地将委托事件附加到与真实事件源相近的元素。 拥有文档对象上的所有事件处理程序对性能来说可能很糟糕 – 必须匹配针对所有select器的每个事件。 如果您需要停止冒泡事件，也可能需要这样做 – 如果所有事件都在文档中被捕获，那么它们已经冒泡了。
实际上，在这种情况下，最好的解决scheme不是使用$(document)而是使用像$("selector")这样的特定元素。
最好的方法是使用元素的容器并在on函数中绑定元素select器。 通过这样做可以避免不必要的事件冒泡到文档中。
所以代码应该是这样的：
$("this_is_the_container").on('event','my_element_selector',function(){ // do some stuff here })
