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

使用 jQuery .on() 进行直接事件处理与委托事件处理

当使用 jQuery .on() 方法进行事件处理时，有是直接事件处理程序和委托事件处理程序之间的根本区别。

直接事件处理程序，如其名称所示，attach事件侦听器直接指向特定元素。例如：

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

在此场景中，单击事件侦听器直接绑定到 div#target 容器内的每个 span.green 元素。

另一方面，委托事件处理程序，将事件侦听器附加到父元素，并将事件处理委托给与选择器匹配的后代元素。例如：

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

这里，点击事件侦听器附加到 div#target 容器，然后将点击处理委托给任何后代的 span.green 元素。

键区别在于，在委托事件处理中，如果事件直接发生在父元素上，则不会调用处理程序。相反，事件会在 DOM 树中向上冒泡，并且仅针对与所提供的选择器匹配的后代元素调用处理程序。这对于可能添加或删除新元素的动态内容是有益的，因为事件侦听器将自动应用于任何匹配的后代，而不需要显式绑定。

在提供的示例中，直接事件和委托事件处理程序会导致相同的行为，因为没有添加或删除动态元素。但是，如果新的 span.green 元素动态添加到页面，则只有委托的事件处理程序才会处理它们的单击事件。

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