事件委托通过在父元素绑定单个监听器替代为每个子元素单独绑定，将内存开销从O(n)降至O(1)，避免重复函数实例、DOM引用和垃圾回收压力，并天然支持动态元素增删及精准目标匹配，但仅适用于冒泡事件。
直接在父元素上绑定一个监听器，代替为每个子元素单独绑定，就能显著降低内存消耗。核心在于避免创建大量重复的事件处理函数实例，同时减少 DOM 与 JS 引擎之间的引用关系。
100 个按钮只需 1 个监听器
传统方式为每个按钮调用 addEventListener，每个监听器都是独立函数对象，占用约 2–4KB 内存。100 个按钮意味着 100 个函数实例、100 次 DOM 引用绑定。而事件委托只在父容器（如 <ul> 或 <div id="container">）上绑定一次监听器，内存开销几乎不变。
- 每个监听器本质是一个闭包，会持有作用域链，长期驻留堆内存
- 大量监听器还会增加 V8 垃圾回收压力，尤其在新生代频繁晋升到老生代时
- 委托后，监听器数量从 O(n) 降为 O(1)，初始化时间也从线性变为常数级
避免动态插入时反复绑定
当通过 AJAX 或用户操作新增 DOM 元素（如追加列表项、弹出卡片），传统做法需遍历新节点并逐个绑定事件——这不仅浪费 CPU，还不断创建新函数实例，加剧内存增长。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 事件委托天然支持“即插即用”：新元素只要符合选择器规则（如
.btn），点击时冒泡到父层即可被识别 - 无需在
appendChild后再调用addEventListener，消除了冗余的函数分配和 DOM 查找 - 删除元素时也不必手动
removeEventListener，避免因遗漏导致的内存泄漏
用 event.target + matches() 精准匹配目标
委托监听器内不靠循环或全局缓存判断触发源，而是用轻量方法实时校验：
立即学习“Java免费学习笔记（深入）”；
-
e.target.matches('.delete-btn')—— 高效、无副作用，浏览器原生优化 -
e.target.closest('.card')—— 向上查找最近匹配祖先，适合嵌套结构 - 避免使用
getElementsByTagName或querySelectorAll在事件中反复查询，防止强制重排重绘和临时对象创建
注意非冒泡事件的限制
不是所有事件都适用委托。像 focus、blur、mouseenter、mouseleave 默认不冒泡（部分可通过 options.bubbles: true 模拟，但兼容性差）。应优先对 click、input、keydown、submit 等天然冒泡事件使用委托。
- 误用于不冒泡事件会导致监听器完全不触发
- 若必须处理 focus/blur，可改用
focusin/focusout（它们冒泡） - 始终检查事件是否在目标阶段已被阻止（
e.stopPropagation()），否则委托会失效
