166

我试图了解使用jQuery .on()方法的直接事件处理程序和委托事件处理程序之间的这种特殊区别。具体来说，本段最后一句：

当selector提供 a 时，事件处理程序被称为delegated。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），并为沿该路径匹配选择器的任何元素运行处理程序。

“为任何元素运行处理程序”是什么意思？我制作了一个测试页来试验这个概念。但是以下两种构造都会导致相同的行为：

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

或者，

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

也许有人可以参考一个不同的例子来澄清这一点？谢谢。

4

6 回答 6

389

案例1（直接）：

$("div#target span.green").on("click", function() {...});

==嘿！我希望 div#target 中的每个 span.green 都听：当你被点击时，做 X。

案例2（委托）：

$("div#target").on("click", "span.green", function() {...});

==嘿，div#target！当您的任何“span.green”子元素被点击时，对它们执行 X。

换句话说...

在案例 1 中，这些跨度中的每一个都已单独给出说明。如果创建了新跨度，他们将不会听到指令并且不会响应点击。每个跨度直接负责自己的事件。

情况2，只有容器得到指令；它负责代表其子元素注意点击。捕捉事件的工作已被委派。这也意味着将针对将来创建的子元素执行指令。

于 2011-11-13T11:22:02.303 回答
6

第一种方式，$("div#target span.green").on()在代码执行时将点击处理程序直接绑定到与选择器匹配的跨度。这意味着如果稍后添加其他跨度（或更改它们的类以匹配），它们就会错过并且不会有点击处理程序。这也意味着如果您稍后从其中一个跨度中删除“绿色”类，它的点击处理程序将继续运行 - jQuery 不会跟踪处理程序的分配方式并检查选择器是否仍然匹配。

第二种方式，$("div#target").on()将点击处理程序绑定到匹配的 div(s)（同样，这是针对那些在那个时刻匹配的），但是当点击发生在 div 中的某处时，处理程序函数只会在点击时运行不仅发生在 div 中，而且发生在与第二个参数中的选择器.on()“span.green”匹配的子元素中。以这种方式创建这些子跨度无关紧要，单击它们仍将运行处理程序。

因此，对于没有动态添加或更改其内容的页面，您不会注意到这两种方法之间的区别。如果您要动态添加额外的子元素，则第二种语法意味着您不必担心为它们分配点击处理程序，因为您已经在父元素上完成了一次。

于 2011-11-13T11:03:55.573 回答
6

N3dst4的解释很完美。基于此，我们可以假设所有子元素都在 body 中，因此我们只需要使用这个：

$('body').on('click', '.element', function(){
    alert('It works!')
});

它适用于直接或委托事件。

于 2014-04-25T16:42:17.820 回答
3

与 OP 相切，但帮助我解开与此功能混淆的概念是绑定元素必须是所选元素的父级。

  • Bound 是指.on.
  • Selected 指的是 的第二个参数.on()。

委托不像 .find() 那样工作，选择绑定元素的子集。选择器仅适用于严格的子元素。

$("span.green").on("click", ...

与

$("span").on("click", ".green", ...

特别是，为了获得@N3dst4 暗示的“将来创建的元素”的优势，绑定元素必须是永久父元素。然后被选中的孩子可以来来去去。

编辑

.on为什么委派不起作用的清单

$('.bound').on('event', '.selected', some_function)可能不起作用的棘手原因：

  1. 绑定元素不是永久的。它是在调用后创建的.on()
  2. 所选元素不是绑定元素的正确子元素。这是相同的元素。
  3. 选定元素通过调用.stopPropagation().

（省略不那么棘手的原因，例如拼写错误的选择器。）

于 2016-01-27T16:01:17.437 回答
1

我写了一篇比较直接事件和委托的帖子。我比较了纯 js，但它对于只封装它的 jquery 具有相同的含义。

结论是委托事件处理适用于动态 DOM 结构，其中可以在用户与页面交互时创建绑定元素（无需再次绑定），而直接事件处理适用于静态 DOM 元素，当我们知道结构不会改变时。

有关更多信息和完整比较 - http://maciejsikora.com/standard-events-vs-event-delegation/

使用始终委托的处理程序，我认为这是当前非常流行的方法，这不是正确的方法，许多程序员使用它是因为“应该使用它”，但事实是直接事件处理程序在某些情况下更好，并且应该支持选择使用哪种方法通过对差异的了解。

于 2016-09-06T12:54:12.200 回答
0

案例 3（委托）：

$("div#target").delegate("span.green", "click", function() {...});
于 2021-01-11T16:21:06.653 回答