在()上使用jQuery时,为什么要使用(document)与元素本身？

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对象委派,而是建议页面加载中最近的父对象.

以下是文档on().

Answer 2

这不是真的.

这两行完全是两件事.

第一".areaCodeList a"行是带有选择器的委托事件,而第二行是附加到".areaCodeList a"元素的事件.

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

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

由于所有.live()事件都附加在document元素上,因此事件在处理之前会占用最长和最慢的路径

请阅读on 文档:

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

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档.在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪.
...
...