jQuery | 委托（）方法

简介

jQuery 的委托方法（delegate）是一种事件委托技术，能够为多个后代元素绑定同一个事件处理程序。委托方法的优势在于：对动态创建的元素同样有效，而且可以减少绑定的事件处理程序数量，提高效率。

语法

$(selector).delegate(childSelector, event, handler)

或者

$(selector).on(event, childSelector, handler)

参数说明

• selector：用于绑定事件的祖先元素选择器
• childSelector：用于指定后代元素的选择器，可以是标签名、类名、ID 等
• event：要绑定的事件类型，如 "click" 或 "mouseenter"
• handler：事件处理程序函数

注：委托方法有一个废弃的版本，即 $(selector).delegate(childSelector, eventType, handler)，在 jQuery 3.0 及以上版本被废弃。

使用示例

例如，在一个 ul 列表中需要为所有 li 元素绑定事件处理程序：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
$(document).ready(function(){
  $("#list").delegate("li", "click", function(){
    $(this).toggleClass("selected");
  });
});
</script>

上面的代码将为 ul#list 元素绑定事件，当一个 li 子元素被点击时，事件将从该元素向上冒泡，由 ul#list 处理。这样可以避免为每个 li 元素单独绑定事件处理程序，提高效率。

注意事项

• 委托方法只能在指定元素的后代元素上起作用，不能将事件处理程序绑定到选择器所指定的元素上。
• 如果有多个祖先元素都可绑定事件，最好通过父元素选择器来绑定事件，这样可以避免多次绑定相同的事件处理程序。
• 使用委托方法要注意选择器的使用，选择器越具体，匹配的元素越少，效率越高。
• 在 jQuery 1.7 及以上版本，可以使用 on() 方法代替 delegate() 方法，其语法基本相同，并且支持连缀操作。

以上就是 jQuery 委托方法的相关介绍，希望对大家有所帮助。