jQuery | undelegate() 与示例介绍

1. 概述

undelegate() 方法从被选中元素的后代元素中删除一个或多个事件处理程序。这意味着您可以在事件委托中删除事件处理程序。

2. 语法

$(selector).undelegate([namespace], [eventType], [handler]);

参数说明：

• namespace（可选）：指定事件命名空间，用于删除特定事件处理程序。
• eventType（可选）：指定要删除的事件类型。
• handler（可选）：指定要删除的事件处理程序。

3. 示例

示例一：删除所有事件处理程序

<button id="myButton">Click me!</button>

// 添加事件处理程序
$('#myButton').delegate(function() {
  console.log('Button clicked!');
});

// 删除事件处理程序
$('#myButton').undelegate();

示例二：删除特定事件类型

<ul id="myList">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

// 添加事件处理程序
$('#myList').delegate('.item', 'click', function() {
  console.log('Item clicked!');
});

// 删除特定事件类型的处理程序
$('#myList').undelegate('.item', 'click');

示例三：删除特定事件类型和命名空间

<ul id="myList2">
  <li class="item2">Item 1</li>
  <li class="item2">Item 2</li>
  <li class="item2">Item 3</li>
</ul>

// 添加带命名空间的事件处理程序
$('#myList2').delegate('.item2', 'click.myNamespace', function() {
  console.log('Item clicked with namespace!');
});

// 删除特定事件类型和命名空间的处理程序
$('#myList2').undelegate('.item2', 'click.myNamespace');

4. 总结

以上是 undelegate() 方法的介绍及示例，掌握了该方法后，您可以更加灵活地管理事件处理程序。