Javascript 差额$（'；div'；）。在（'；单击'；…和$（文档）。在（'；单击'；，'；div'；

两者的区别是什么

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

及

---

第一个方法将绑定

DOM

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

直接和委托事件 大多数浏览器事件从最深处冒泡或传播， 文档中发生事件的最内层元素（事件目标） 一直到正文和文档元素。在互联网上 Explorer 8和更低版本，一些事件（如更改和提交）不会 本机冒泡，但jQuery修补这些冒泡并创建 一致的跨浏览器行为

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

当提供选择器时，事件处理程序称为 委托。事件直接在上发生时不调用处理程序 绑定元素，但仅适用于 匹配选择器。jQuery将事件从事件目标向上冒泡 到处理程序所附加的元素（即，最内层到 最外层元素）

第一个示例（

$（'div'）。on（'click'，fn）；

）是将

click

事件处理程序直接附加到当前存在于DOM中的

div

元素，由选择器匹配

第二个示例（

$（document）.on（'click'，div'，fn）

）是一个“委托”事件处理程序。

click

事件将在

文档

中找到的

div

元素上引发，但一个处理程序附加到

文档

事件处理的委托类型用于将元素动态附加到DOM的情况，因为第一种方法仅在加载页面时将事件附加到DOM中存在的元素。但是，应注意，委托事件应放在与动态添加的元素最近的静态元素上，即t在文档加载时。几乎不应该将

文档

用于此，因为它的性能较差

---

此外，委托事件在附加大量重复事件处理程序的情况下也很有用。例如，不要将单击事件附加到

表

的数百个

tr

元素，而是将单个委托事件附加到

表

本身，并在文档描述中过滤很好地描述了这一点：

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

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

除了处理后代元素上的事件的能力之外 尚未创建，委派事件的另一个优点是 当必须使用多个元素时，可能会产生更低的开销 监视。在tbody中包含1000行的数据表上，此示例 将处理程序附加到1000个元素：

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

委派事件方法仅将事件处理程序附加到一个 元素、tbody和事件只需要向上冒泡一个级别 （从单击的tr到tbody）：

注意：委派事件不适用于SVG

---

关于这一点，文档非常简洁

摘录：

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

---

区别在于，

$（'div'）。在（'click'，function（）{…}

上只绑定已经存在的元素

---

$（document）.on（'click'，'div'，function（）{…}

有一个委托，并且还绑定了将来动态创建的

div

元素。

您读过文档吗？@undefined这正是您因为开玩笑说今天没有足够的事件委托问题而得到的。我责备您：pSlight correction-他们都会绑定existi上的点击事件ng元素。是的，更新了我的答案，谢谢。

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});