使用 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中文网其他相关文章!