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