Question

之间有什么区别

$('div').on('click', function() {
   alert(1);
});

和

$(document).on('click', 'div', function() {
   alert(1);
});

Answer 1

第一个将绑定DOM中现有元素上的click事件，稍后将绑定DOM中存在的元素的事件，或者在执行事件绑定代码后动态添加。第二种方法称为事件委托

直接和委派活动


大多数浏览器事件从最深处传播或传播   文档中最里面的元素（事件目标）   一直到身体和文档元素。在互联网上   Explorer 8及更低版本，更改和提交等一些事件不会   原生泡沫，但jQuery修补这些泡沫和创建   一致的跨浏览器行为。

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外层的元素），reference

Answer 2

第一个示例（$('div').on('click', fn);）将click事件处理程序直接附加到当前存在于DOM中的div元素，由选择器匹配。

第二个示例（$(document).on('click', 'div', fn)）是一个'委托'事件处理程序。将在click中找到的div元素引发document事件，但document附加了一个处理程序。

事件处理的委托类型用于将元素动态附加到DOM的情况，因为第一种方法仅在页面加载时将事件附加到DOM中存在的元素。但应注意，委托事件应放在最接近动态添加的静态元素上，这些元素存在于文档加载中。几乎从不应该document用于此，因为它的性能较差。

此外，委托事件在附加大量重复事件处理程序的情况下非常有用。例如，不是将点击事件附加到tr的数百个table元素，而是将单个委派事件附加到table本身，并在tr上进行过滤。< / p>

Answer 3

文档描述得非常好： http://api.jquery.com/on/

检查＆＃34;直接和委派的事件＆＃34;部;

另外，让我引用它的一部分：

除了能够处理后代元素的事件外尚未创建，委托事件的另一个优势是他们的当许多元素必须存在时，开销要低得多监控。在此示例中，在其tbody中包含1,000行的数据表中将处理程序附加到1,000个元素：
$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});
委托事件方法仅将事件处理程序附加到一个元素，tbody和事件只需要升级一个级别（从点击的tr到tbody）：
$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});
注意：委派事件不适用于SVG。

Answer 4

文档非常简洁。

摘录：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

http://api.jquery.com/on/#direct-and-delegated-events

Answer 5

不同之处在于$('div').on('click', function () { ... }仅绑定已存在的元素。

$(document).on('click', 'div', function () { ... }有一个委托，也会绑定将来动态创建的div个元素。

区别$（'div'）。on（'click'...和$（document）.on（'click'，'div'

5 个答案:

直接和委派活动