jQuery .on() 中的直接事件处理与委托事件处理：我什么时候应该使用哪个？

jQuery .on() 中的直接事件处理与委托事件处理

jQuery .on() 方法提供了两种事件处理选项：直接和委托。在委托处理的上下文中，文档指出，当事件直接发生在绑定元素上时，不会调用事件处理程序，而仅针对与选择器匹配的后代。然而，这提出了“为任何元素运行处理程序”到底是什么意思的问题。

直接事件处理

在直接事件处理中，事件处理程序使用以下语法直接分配给元素：

$("selector").on("event", function() {...});

在这种情况下，事件处理程序将附加到与选择器匹配的每个元素。例如，以下代码为每个 分配一个单击处理程序。

中具有绿色类的元素带有 id 目标：

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

委托事件处理

在委托事件处理中，使用以下语法将事件处理程序分配给父元素：

$("parent").on("event", "child selector", function() {...});

在这种情况下，事件处理程序被分配给父元素，但它只响应后代元素上发生的事件与子选择器匹配的元素。此方法对于将事件处理程序附加到页面最初加载时不存在的动态内容非常有用。

请考虑以下示例：

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

在此示例中，附加了单击处理程序到

;与 id 目标。但是，它仅响应 的后代元素上发生的点击。

关键区别

直接事件处理和委托事件处理之间的关键区别在于目标元素和处理事件的元素之间的关系。在直接事件处理中，目标元素也是处理事件的元素。在委托事件处理中，目标元素是处理事件的元素的父元素。

实际含义

通常，在使用委托事件处理时，首选可以随时间变化的动态内容。通过将事件处理程序附加到父元素，您可以确保即使将新元素添加到页面也能处理事件。直接事件处理更适合不会随时间变化的静态内容。

以上是jQuery .on() 中的直接事件处理与委托事件处理：我什么时候应该使用哪个？的详细内容。更多信息请关注PHP中文网其他相关文章！