jQuery 事件委托语法

jQuery 事件委托（Event Delegation）是一种利用 事件冒泡机制 将事件监听器绑定在父元素而非直接绑定在目标子元素上的技术。其核心思想是由父元素统一管理子元素的事件响应，特别适用于处理动态生成的元素或优化大量子元素的事件绑定。

jQuery 事件委托通过 父元素代理子元素事件 + 事件冒泡 机制，解决了动态元素事件绑定的难题，同时优化了性能。其标准实现是 $(父元素).on(事件, 子元素选择器, 回调)，需注意父元素的稳定性和选择器效率。合理使用此技术可大幅提升前端代码的健壮性与可维护性。

原理与工作机制

事件冒泡（Event Bubbling）
当子元素（如按钮）触发事件（如点击）时，事件会从子元素逐级向上冒泡至父元素、祖先元素，直至文档根节点。
委托机制
在父元素（如 body 或 ul）上绑定事件监听器，通过事件冒泡捕获子元素触发的事件。父元素通过 event.target 属性判断事件源（实际触发事件的子元素），再执行对应的回调函数。 类比理解：
公司前台（父元素）代收所有员工（子元素）的快递。新员工入职（动态添加元素）时，无需单独通知快递员，前台仍可代为签收。

传统事件绑定的问题：

// 这种方式只对页面加载时已存在的元素有效
$('.copy').click(function() {
    // 如果.copy元素是后来动态添加的，这个事件不会生效
});

事件委托的优势：

// 事件委托：将事件绑定到静态的父元素（document）
$(document).on('click', '.copy', function() {
    // 即使.copy元素是动态添加的，这个事件也能正常工作
});

实现方式（jQuery API）

使用 .on() 方法绑定委托事件，语法如下：

$(父元素选择器).on(事件类型, 子元素选择器, 回调函数);

示例：动态按钮的点击事件委托

<ul id="button-list">
  <button class="btn">按钮1</li>
  <!-- 动态添加的按钮也会自动绑定事件 -->
</ul>

<script>
  // 委托给 #button-list 处理所有 .btn 的点击事件
  $('#button-list').on('click', '.btn', function() {
    console.log("点击了：" + $(this).text());
  });
</script>

核心优势

支持动态元素
后续添加到 DOM 中的子元素（如 AJAX 加载内容）无需重新绑定事件，自动继承父元素的事件监听。
提升性能
将 n 个子元素的事件绑定减少为 1 个父元素绑定，减少内存占用和初始化时间（尤其适用于列表、表格等大量重复元素）。
简化代码逻辑
避免重复绑定相同事件，统一管理事件回调，降低维护成本。

注意事项

选择父元素的原则
- 必须是目标子元素的稳定父级（非动态生成）。
- 尽量选择最近的父元素（如 ul 而非 body），减少事件冒泡路径，提升效率。
避免滥用委托
简单场景（如静态按钮）直接绑定事件更高效（$('.btn').click(...)）。
事件对象的关键属性
- event.target：实际触发事件的子元素。
- event.currentTarget：绑定事件的父元素（即委托方）。

典型应用场景

动态生成的列表项（如无限滚动加载）。
大型数据表格的行/列交互。
需要统一管理的按钮组（如批量操作）。

代码分解

$(document).on('click', '.copy', function() {
    // 事件处理逻辑
});

1. `$(document)`

选择整个文档对象（HTML文档）
这是事件委托的”委托容器”

2. `.on('click', '.copy', function() { ... })`

.on(): jQuery的事件绑定方法
'click': 监听的事件类型（点击事件）
'.copy': 事件目标的选择器（class为”copy”的元素）
function() { ... }: 事件触发时执行的回调函数

工作流程

事件冒泡：当点击.copy元素时，点击事件会向上冒泡到document
事件捕获：document捕获到点击事件
目标检查：jQuery检查事件的实际目标是否匹配.copy选择器
执行处理：如果匹配，就执行回调函数

实际应用示例

// 动态添加复制按钮后，事件仍然有效
$('pre.wp-block-code').each(function() {
    // 动态创建按钮
    var buttonHTML = '<button class="copy">复制</button>';
    $(this).before(buttonHTML);
});

// 事件委托确保新按钮也能响应点击
$(document).on('click', '.copy', function() {
    console.log('复制按钮被点击了！');
    // 即使这个按钮是刚刚动态添加的，事件也能正常触发
});

为什么在您的代码中使用事件委托？

在您的WordPress代码块复制功能中：

复制按钮是动态添加到页面的
使用事件委托可以确保：
后添加的按钮也能响应点击事件
不需要在每次添加按钮后重新绑定事件
代码更简洁高效

性能优化建议

虽然$(document).on()可以工作，但更好的做法是使用最近的静态父元素：

// 更好的做法：使用最近的静态容器
$('.container').on('click', '.copy', function() {
    // 这样事件冒泡的范围更小，性能更好
});

jQuery教程