jQuery .on() 中的直接事件处理与委托事件处理：您应该选择哪种方法？

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

jQuery 的 .on() 方法提供了两种不同的事件处理方法：直接并委托。区别在于事件处理的范围。

直接事件处理

在直接事件处理中，事件处理程序直接绑定到目标元素。这意味着仅当事件直接发生在该元素上（而不是其任何后代上）时才会执行处理程序。例如：

$("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 中，每个跨度直接负责处理自己的事件。在情况 2 中，容器元素 (div#target) 被委托负责处理其子元素 (span.green) 的事件。

示例比较

提供的示例演示了在 div#target 中单击绿色跨度的上下文中直接事件处理和委托事件处理之间的差异。两种方法都实现了相同的行为，即提醒单击的跨度的类。

直接方法：

• 每个绿色跨度都绑定到其自己的单击事件处理程序。
• 在 div#target 中创建的新绿色跨度将不会绑定事件处理程序

委托方法：

• 事件处理程序绑定到 div#target，使用 span.green 作为委托选择器。
• 点击 div#target 中任何现有或未来的绿色跨度将已处理。
• div#target 负责代表其所有与 span.green 匹配的子元素处理事件。

以上是jQuery .on() 中的直接事件处理与委托事件处理：您应该选择哪种方法？的详细内容。更多信息请关注PHP中文网其他相关文章！