jQuery事件 delegate()使用方法介绍

什么是delegate()方法？

delegate()方法是jQuery事件中常用的一种事件绑定方法，可以在父元素上绑定事件，对于其子元素的相应事件响应。

delegate()方法的语法格式如下：

$(selector).delegate(childSelector,event,data,function)

• selector : 需要绑定事件的父级元素或选择器。
• childSelector : 需要响应事件的子元素或选择器。
• event : 需要绑定的事件类型，比如click、mouseenter、mouseleave等等。
• data : 可选参数，传递到事件处理程序的额外数据。
• function : 要执行的函数。

delegate()方法的优劣

delegate() 相对于 click() ,bind()等方法，有以下优劣：

优点：

1. 通过事件冒泡机制，实现后续动态添加 DOM 元素的同类监听器的绑定、解绑。
2. 可以链式编程，简单易读。

缺点：

1. 对于不支持的事件类型（如focus和blur) 不适用。
2. 监听的是子元素事件，导致DOM触发次数增多。
3. 性能相对较差，委托层级过多会导致响应速度变慢，性能下降。

delegate()方法示例说明

1. 示例一

<div id="box">
  <button>按钮1</button>
  <button>按钮2</button>
</div>

$('#box').delegate('button', 'click', function(e) {
  console.log($(this).text()); //输出按钮的文本内容
});

以上示例代码中，使用delegate()方法给#box元素绑定一个事件委托，委托子元素button触发click事件。

1. 示例二

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

$('#list').delegate('li', 'click', function(e){
  $(this).toggleClass('active');
});

以上示例代码中，使用delegate()方法给#list元素绑定了一个事件委托，委托子元素li触发click事件，实现选中切换效果。

总结

delegate()方法建立在事件冒泡机制中，使得动态添加元素时无需多次绑定事件，提高了代码的健壮性。然而对于频繁操作的DOM效率会下降，所以使用delegate()方法一定要注意委托的层级。