事件委托通过将监听器绑定到共同祖先节点，利用冒泡机制统一处理，以O(1)替代O(n)绑定，显著降低内存与初始化开销，并天然支持动态内容。

直接在海量 DOM 节点上逐个挂载事件监听器，会带来显著的内存开销、初始化延迟和动态维护负担。事件委托通过将监听逻辑“上收”到共同祖先节点，利用事件冒泡机制统一响应，从根源上规避这些成本。

核心原理：用一次绑定替代 N 次绑定

浏览器中每个 addEventListener 调用都会创建独立的监听器对象，占用约 2–4KB 内存，并触发对应 DOM 节点的内部引用维护。当有数百甚至上千个按钮、列表项或表格单元格时，传统方式的时间复杂度为 O(n)，而事件委托只需一次绑定，时间复杂度降为 O(1)。

• 监听器数量从 n 个 → 1 个（父容器）
• 内存占用大幅下降，尤其利于长列表、仪表盘、数据表格等场景
• 页面首次渲染后无需等待批量绑定完成即可交互

正确选择委托容器：就近、稳定、语义合理

并非所有祖先都适合做委托容器。应优先选取离目标元素最近、生命周期稳定、且不会频繁被替换或销毁的父级节点。

• ✅ 推荐：<ul id="todo-list">、<div class="product-grid">、<table id="data-table">
• ❌ 避免：document 或 body（事件需冒泡过长路径，可能被中途阻止；且易受全局操作干扰）
• ⚠️ 注意：若容器本身可能被 innerHTML = ... 或 replaceWith() 替换，会导致监听器丢失——应确保容器由 JS 控制、不被粗暴重写

精准识别目标：用 matches() 和 closest() 做轻量过滤

在委托回调中，不能依赖 e.target 直接操作，而要快速判断它是否属于预期的可交互子元素。

• e.target.matches('.action-btn')：适用于直接点击目标就是按钮本身的情况
• e.target.closest('[data-action="delete"]')：更健壮，能捕获点击在按钮子元素（如图标、文字）上的情况
• 避免使用 nodeName === 'BUTTON' 等硬编码判断，不利于样式/结构演进
• 过滤逻辑应尽量简单，避免在高频事件中执行复杂 DOM 查询或正则

天然支持动态内容，彻底省去重复绑定

新插入的 DOM 元素只要位于委托容器内，无需任何额外操作即可响应事件——这是减少运行时成本的关键优势。

• AJAX 加载新列表项？直接 append() 即可
• 用户新增一条待办？创建 <li> 后塞进委托容器，事件自动生效
• 无需在插入后调用 btn.addEventListener(...)，也无需维护“已绑定”状态映射表
• 避免因遗漏绑定导致的交互失效，降低维护出错率