javascript - 区别 $('div').on('click'... 和 $(document).on('click', 'div'

Question

和有什么区别

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

和

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

Answer 1

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

直接和委托事件

大多数浏览器事件冒泡或传播，从文档中最深、最里面的元素（事件目标）一直到正文和文档元素。在 Internet Explorer 8 及更低版本中，一些事件（例如更改和提交）本身不会冒泡，但 jQuery 将这些事件修补为冒泡并创建一致的跨浏览器行为。

如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时都会调用处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的冒泡。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），参考

Answer 2

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

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

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

此外，委托事件在您附加大量重复事件处理程序的情况下很有用。例如，不是将点击事件附加到 a 的数百个tr元素，而是将table单个委托事件附加到table自身，在tr.

Answer 3

该文档很好地描述了它：http: //api.jquery.com/on/

检查“直接和委托事件”部分；

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

除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。在其 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了将来动态创建的元素。