事件委托通过在父元素绑定单个监听器并利用event.target识别子元素，避免为每个子元素创建独立函数实例，从而减少内存开销、支持动态元素且降低泄漏风险。
直接在父元素上监听事件，靠 event.target 判断实际点击的是哪个子元素，就能用一个监听器代替多个——这是事件委托能节省内存的核心逻辑。
为什么事件委托能减少内存开销
传统方式为每个子元素单独绑定事件监听器，100 个按钮就要创建 100 个函数实例，占用大量内存。而事件委托只在父级（如 <ul></ul> 或 <div>）绑定一次监听器，无论子元素增减多少，监听器数量始终是 1。
<ul>
<li>每个事件处理函数都包含闭包、作用域链等运行时开销，数量越少，堆内存压力越小</li>
<li>动态添加的子元素无需重新绑定，避免了反复调用 <code>addEventListener 带来的内存分配和 DOM 查询成本
关键实现步骤
三步即可完成基础委托：
- 选一个稳定的父容器（推荐有明确 ID 或 class 的非动态父级，如
#list） - 给它绑定事件监听器，类型与子元素要响应的事件一致（如
'click'） - 在回调中用
event.target检查触发源，并做标签名、类名或 data 属性匹配（例如event.target.matches('button[data-action]')）
注意冒泡行为本身要可控
委托依赖冒泡，但不是所有场景都希望事件一路传到顶层：
- 若子元素内有嵌套结构（比如按钮里有图标
<i></i>），event.target可能是图标而非按钮——建议用event.currentTarget确保是监听器绑定的父元素，再用event.target.closest('button')安全定位目标 - 某些子操作需阻止向上冒泡（如表单内点击“删除”弹窗，不希望同时触发外层折叠逻辑），可在子元素事件中调用
event.stopPropagation()，不影响委托主逻辑 - 避免在
document或window上无差别监听，容易引发意外触发和调试困难；优先选择语义明确、层级适中的父容器
一个简洁可靠的写法示例
HTML：
<ul id="task-list"> <li data-id="1">买牛奶</li> <li data-id="2">还书</li> </ul>
JavaScript：
document.getElementById('task-list').addEventListener('click', (e) => {
const item = e.target.closest('li');
if (item && item.dataset.id) {
console.log('操作任务：', item.textContent, 'ID=', item.dataset.id);
}
});
这段代码支持后续用 JS 动态插入新 <li>，无需额外绑定，内存占用恒定。
