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

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

jQuery .on() 方法允许注册事件处理程序在 DOM 元素上。事件处理的两种不同方法是直接绑定和委托绑定。直接绑定将事件处理程序直接附加到特定元素，而委托绑定允许对与父元素中的选择器匹配的元素进行事件处理。

有关委托事件处理程序的给定段落的最后一句指出 jQuery“运行任何元素的处理程序...与选择器匹配。”这是指 DOM 中的事件冒泡机制。

当使用 .on() 和选择器将委托事件处理程序附加到父元素时，事件不仅会在选定元素上处理，还会在其后代元素上处理与选择器匹配。当事件在 DOM 树中冒泡时，jQuery 检查路径上是否有任何元素与选择器匹配，如果找到匹配则触发处理程序。

为了说明差异，请考虑以下示例：

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

这直接将点击处理程序绑定到所有 #target div 中具有绿色类的元素。这些元素中的每一个都将独立处理单击事件。

相反，以下元素使用委托绑定：

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

这里，单击事件处理程序附加到 #target div，但选择器“事件冒泡”到匹配“绿色”的元素。这意味着任何未来的在 #target div 中创建的具有“green”类的元素也会触发点击处理程序。

在从页面动态添加和删除元素时，委托绑定特别有用，因为它确保新元素继承事件无需手动绑定即可处理行为。

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