一尘不染

JavaScript直接与委托-jQuery .on()

javascript

我正在尝试使用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");
});

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


阅读 458

收藏
2020-04-22

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

2020-04-22