事件委托

一、事件委托（Event Delegation）的核心定义

事件委托（也叫事件代理）是 JavaScript 中利用事件冒泡机制实现的一种事件处理优化方案：将原本需要绑定在多个子元素上的事件，统一绑定到它们的共同父元素上；当子元素触发事件时，事件会冒泡到父元素，父元素再通过 event.target 判断触发事件的具体子元素，从而执行对应的逻辑。

核心原理：事件冒泡

DOM 事件流分为「捕获阶段 → 目标阶段 → 冒泡阶段」，事件委托依赖冒泡阶段：事件从触发的子元素（目标）向上传播到其所有祖先元素，父元素能捕获到这个冒泡的事件。

二、事件委托的核心价值

减少事件绑定数量：无需给每个子元素绑定事件，仅绑定一次父元素，降低内存占用；
支持动态新增元素：新增的子元素无需重新绑定事件，父元素的委托逻辑自动生效；
简化代码维护：事件处理逻辑集中在父元素，无需分散到多个子元素的绑定逻辑中。

三、代码示例：基础用法

场景：列表项点击事件（传统写法 vs 事件委托）

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

1. 传统写法（弊端明显）

// 给每个 li 绑定点击事件
const lis = document.querySelectorAll("#list li");
lis.forEach(li => {
  li.addEventListener("click", function() {
    console.log("点击了：", this.textContent);
  });
});

// 问题1：新增 li 需重新绑定
const newLi = document.createElement("li");
newLi.textContent = "项4";
document.querySelector("#list").appendChild(newLi);
// 新 li 无点击事件，需再次调用 addEventListener

2. 事件委托写法（优化）

// 仅绑定父元素 ul
const list = document.querySelector("#list");
list.addEventListener("click", function(e) {
  // e.target 是触发事件的具体子元素（li）
  if (e.target.tagName === "LI") { // 过滤非 li 元素（如 ul 自身）
    console.log("点击了：", e.target.textContent);
  }
});

// 新增 li 自动生效
const newLi = document.createElement("li");
newLi.textContent = "项4";
list.appendChild(newLi);
// 点击项4，控制台正常输出 → 无需重新绑定事件

四、关键细节：精准匹配目标元素

实际开发中，子元素可能有嵌套结构（如 li 内包含 span），需通过 e.target 精准定位到目标元素：

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

const list = document.querySelector("#list");
list.addEventListener("click", function(e) {
  // 方式1：向上查找目标元素（兼容嵌套）
  const targetLi = e.target.closest("LI"); 
  if (targetLi) { // 找到 li 才执行
    console.log("点击了：", targetLi.textContent);
  }

  // 方式2：判断元素类名（更灵活）
  // if (e.target.classList.contains("item")) { ... }
});

五、事件委托的适用场景

列表 / 表格类元素：如 ul/li、table/tr/td，子元素数量多或动态新增；
表单元素：如多个输入框的 change/input 事件，委托到表单父元素；
动态渲染的元素：如接口返回数据生成的 DOM 元素，无需手动绑定事件；
高频操作的元素：如按钮组、标签页，减少重复绑定。

六、注意事项（避坑）

不支持冒泡的事件无法委托：如 focus、blur（可改用 focusin/focusout，这两个事件支持冒泡）；
谨慎使用 stopPropagation：子元素若调用 e.stopPropagation()，会阻止事件冒泡，导致委托失效；
性能考量：避免将委托绑定到过高层级的元素（如 document/body），否则所有冒泡事件都会触发该逻辑，增加不必要的判断开销；
精准过滤目标：必须通过 tagName/classList/id 等过滤目标元素，避免父元素自身触发逻辑。

七、核心总结

特性	传统事件绑定	事件委托
绑定次数	子元素数量 = 绑定次数	仅绑定 1 次（父元素）
动态元素	需重新绑定	自动生效
内存占用	高（多绑定）	低（单绑定）
适用场景	固定少量子元素	大量 / 动态子元素