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

我试图理解使用的直接事件处理程序和委托事件处理程序之间的特殊区别。具体而言，本段最后一句：

如果提供了

选择器

，则事件处理程序称为委派。当事件直接发生在绑定元素上时，不会调用该处理程序，而仅针对与选择器匹配的子体（内部元素）。jQuery将事件从事件目标冒泡到附加处理程序的元素（即，从最内层到最外层的元素），并为与选择器匹配的路径上的任何元素运行处理程序

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

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

或者

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

第一种方法，

$（“div#target span.green”）。on（）

将单击处理程序直接绑定到执行代码时与选择器匹配的范围。这意味着，如果以后添加了其他跨距（或将其类更改为匹配），则这些跨距将丢失，并且不会有单击处理程序。这还意味着，如果您稍后从其中一个跨度中删除“green”类，其单击处理程序将继续运行-jQuery不会跟踪处理程序的分配方式，并检查选择器是否仍然匹配

第二种方法，

$（“div#target”）.on（）

，将单击处理程序绑定到匹配的div（同样，这是针对当时匹配的div），但是，当单击发生在div中的某个位置时，仅当单击不仅发生在div中，而且发生在与第二个参数中的选择器匹配为

.on（）

，“span.green”的子元素中时，处理程序函数才会运行。通过这种方式创建这些子跨度并不重要，单击它们仍将运行处理程序

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

第一种方法是，

$（

将单击处理程序直接绑定到span在代码执行时与选择器匹配的。这意味着，如果以后添加了其他跨距（或将其类更改为匹配），则这些跨距将丢失，并且不会有单击处理程序。这还意味着，如果您稍后从其中一个跨度中删除“green”类，其单击处理程序将继续运行-jQuery不会跟踪处理程序的分配方式，并检查选择器是否仍然匹配

第二种方法，

$（“div#target”）.on（）

，将单击处理程序绑定到匹配的div（同样，这是针对当时匹配的div），但是，当单击发生在div中的某个位置时，仅当单击不仅发生在div中，而且发生在与第二个参数中的选择器匹配为

.on（）

，“span.green”的子元素中时，处理程序函数才会运行。通过这种方式创建这些子跨度并不重要，单击它们仍将运行处理程序

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

案例1（直接）：

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

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

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

嘿！我希望div#target中的每个span.green都能听清楚：当你被点击时，执行X

案例2（委托）：

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

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

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

==嘿，迪夫#目标！当您的任何“span.green”子元素被单击时，对它们执行X操作

换句话说…

在案例1中，每个跨度都单独给出了说明。如果创建了新的跨距，他们将不会听到指令，也不会响应单击。每个跨度对其自身的事件负直接责任

在案例2中，只有容器得到了指示；它负责通知代表其子元素的单击。捕捉事件的工作已被委派。这也意味着将对将来创建的子元素执行指令。

案例1（直接）：

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

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

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

嘿！我希望div#target中的每个span.green都能听清楚：当你被点击时，执行X

案例2（委托）：

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

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

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

==嘿，迪夫#目标！当您的任何“span.green”子元素被单击时，对它们执行X操作

换句话说…

在案例1中，每个跨度都单独给出了说明。如果创建了新的跨距，他们将不会听到指令，也不会响应单击。每个跨度对其自身的事件负直接责任

---

在案例2中，只有容器得到了指示；它负责通知代表其子元素的单击。捕捉事件的工作已被委派。这也意味着该指令将针对将来创建的子元素执行。

N3dst4的解释非常完美。基于此，我们可以假设所有子元素都在主体内部，因此我们只需要使用以下内容：

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

---

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

N3dst4的解释非常完美。基于此，我们可以假设所有子元素都在主体内部，因此我们只需要使用以下内容：

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

---

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

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

---

• [jquery]相关文章推荐

---

• 随机文章推荐

• 使用WebView.loadUrl（字符串）加载存储在zip扩展文件中的png文件 webview
• WebView的定位-Monotouch webviewxamarin.ios
• Webview JavaFXWebEngine超时处理 webviewjavafx
• 从Webview下载图像 webviewuwp
• Webview 苹果或/和谷歌商店是否允许Web View应用程序（包括登录和支付网关）具有推送通知功能？ webviewpush-notification
• Android Webview如果没有Internet错误自定义页面 webview