委托 jQuery

什么是委托？

委托操作（Delegated Events）是指将事件处理程序绑定到被选元素的父元素上，在事件冒泡阶段处理事件。

委托操作可以减少事件处理程序的数量，提高性能。

jQuery 中如何使用委托？

jQuery 提供了 .on() 方法来绑定事件处理程序。可以传递一个选择器作为 .on() 的第二个参数来指定将要触发事件的后代元素。这就是事件委托。

$(selector).on(event, childSelector, data, callback);

其中：

• selector：父元素选择器；
• event：触发的事件；
• childSelector：子元素选择器；
• data：传递给事件处理程序的数据；
• callback：事件处理程序。

实例：

$("ul").on("click", "li", function() {
  console.log("点击了 li 元素");
});

上面的代码指定了 ul 元素作为事件委托的父元素，当 ul 元素的子元素 li 被点击时，触发事件处理程序。

优势

• 容易管理：只需要向父元素绑定一个事件处理程序，就可以管理所有后代元素的事件；
• 动态元素：当新元素被添加到文档中时，也会受到事件委托的影响，不需要重新绑定事件处理程序，节省了代码量；
• 性能优化：绑定一个事件处理程序比为每一个元素单独绑定事件处理程序的开销更小。

例子

HTML

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

jQuery

$("#myList").on("click", "li", function() {
  console.log($(this).text());
});

上面的代码中，当 li 元素被点击时，会输出该元素的文字内容。

Markdown 代码片段

## 什么是委托？

委托操作（Delegated Events）是指将事件处理程序绑定到被选元素的父元素上，在事件冒泡阶段处理事件。

委托操作可以减少事件处理程序的数量，提高性能。

## jQuery 中如何使用委托？

jQuery 提供了 `.on()` 方法来绑定事件处理程序。可以传递一个选择器作为 `.on()` 的第二个参数来指定将要触发事件的后代元素。这就是事件委托。

```javascript
$(selector).on(event, childSelector, data, callback);

其中：

• selector：父元素选择器；
• event：触发的事件；
• childSelector：子元素选择器；
• data：传递给事件处理程序的数据；
• callback：事件处理程序。

实例：

$("ul").on("click", "li", function() {
  console.log("点击了 li 元素");
});

上面的代码指定了 ul 元素作为事件委托的父元素，当 ul 元素的子元素 li 被点击时，触发事件处理程序。

优势

• 容易管理：只需要向父元素绑定一个事件处理程序，就可以管理所有后代元素的事件；
• 动态元素：当新元素被添加到文档中时，也会受到事件委托的影响，不需要重新绑定事件处理程序，节省了代码量；
• 性能优化：绑定一个事件处理程序比为每一个元素单独绑定事件处理程序的开销更小。

例子

HTML

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

jQuery

$("#myList").on("click", "li", function() {
  console.log($(this).text());
});

上面的代码中，当 li 元素被点击时，会输出该元素的文字内容。