我正在尝试使用jQuery_.on() 方法来理解 _直接 事件处理程序和 委托 事件处理程序之间的特殊区别。具体来说,本段的最后一句话: __
当selector被提供时,事件处理程序被称为委托。当事件直接发生在绑定元素上时,不调用处理程序,而仅对与选择器匹配的后代(内部元素)进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素(即,最内层元素到最外层元素),并沿该路径运行与选择器匹配的任何元素的处理程序。
selector
“为任何元素运行处理程序”是什么意思?我制作了一个测试页来试验这个概念。但是以下两种构造导致相同的行为:
$("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"); });
也许有人可以参考其他示例来阐明这一点?谢谢。
情况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中,仅向容器提供了指令;它负责 代表 其子元素注意到点击。捕获事件的工作已 下放 。这也意味着该指令将针对将来创建的子元素执行。