JavaScript直接与委托-jQuery .on（）

Question

我正在尝试使用jQuery_.on（）
方法来理解 _直接
事件处理程序和 委托
事件处理程序之间的特殊区别。具体来说，本段的最后一句话： __

当selector被提供时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代（内部元素）进行调用。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");
});

也许有人可以参考其他示例来阐明这一点？谢谢。

Answer 1

情况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中，仅向容器提供了指令；它负责 代表 其子元素注意到点击。捕获事件的工作已 下放 。这也意味着该指令将针对将来创建的子元素执行。