事件委托利用事件冒泡机制，将子元素事件监听器统一绑定到父元素，通过event.target或closest()识别目标节点，实现动态增删子元素时无需重绑、节省内存、简化逻辑。

事件委托利用的是事件冒泡机制，把原本要绑定在多个子元素上的事件监听器，统一移到它们的共同父元素上，通过 event.target 判断真正触发事件的子节点，从而实现“以一管多”。

核心原理：事件会从目标元素逐层向上冒泡到父级

当点击一个子元素（比如 <button></button>）时，该点击事件会依次触发：
子元素 → 父元素 → 祖父元素 → …… → document
只要父元素绑定了事件监听器，并且没有调用 event.stopPropagation()，就能捕获到子元素冒泡上来的事件。

基本写法：监听父节点 + 判断 event.target

假设有一组按钮：

  按钮 1
  按钮 2
  按钮 3

统一监听写法如下：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

const list = document.getElementById('list');
list.addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON') {
    console.log('点击了按钮，ID 是：', e.target.dataset.id);
  }
});

更安全的判断方式（推荐）

仅靠 tagName 容易误判（比如按钮里有文字、图标等子节点被点中，e.target 就是 text 或 svg）。应向上查找最近的匹配元素：

立即学习“Java免费学习笔记（深入）”；

• 用 e.target.closest('button') —— 返回自身或最近的 button 祖先
• 如果返回非 null，说明点击区域属于某个按钮
• 再取它的 dataset.id 或其他属性做业务处理

示例：

list.addEventListener('click', function(e) {
  const btn = e.target.closest('button');
  if (btn) {
    console.log('实际点击的按钮 ID：', btn.dataset.id);
  }
});

适用场景与优势

• 动态增删子元素时无需反复绑定/解绑事件（DOM 变了，父监听器依然有效）
• 大幅减少内存占用和事件处理器数量（尤其列表项成百上千时）
• 简化初始化逻辑，只需一次 addEventListener
• 支持未来可能新增的符合选择器规则的子节点