事件委托通过在父元素绑定单个监听器替代为每个子元素单独绑定，将内存开销从o(n)降至o(1)，避免重复函数实例、dom引用和垃圾回收压力，并天然支持动态元素增删及精准目标匹配，但仅适用于冒泡事件。
直接在父元素上绑定一个监听器，代替为每个子元素单独绑定，就能显著降低内存消耗。核心在于避免创建大量重复的事件处理函数实例，同时减少 DOM 与 JS 引擎之间的引用关系。
100 个按钮只需 1 个监听器
传统方式为每个按钮调用 addEventListener，每个监听器都是独立函数对象，占用约 2–4KB 内存。100 个按钮意味着 100 个函数实例、100 次 DOM 引用绑定。而事件委托只在父容器（如 <ul></ul> 或 <div id="container">）上绑定一次监听器，内存开销几乎不变。
<ul>
<li>每个监听器本质是一个闭包，会持有作用域链，长期驻留堆内存</li>
<li>大量监听器还会增加 V8 垃圾回收压力，尤其在新生代频繁晋升到老生代时</li>
<li>委托后，监听器数量从 O(n) 降为 O(1)，初始化时间也从线性变为常数级</li>
</ul>
<h3>避免动态插入时反复绑定</h3>
<p>当通过 AJAX 或用户操作新增 DOM 元素（如追加列表项、弹出卡片），传统做法需遍历新节点并逐个绑定事件——这不仅浪费 CPU，还不断创建新函数实例，加剧内存增长。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发"><img
src="https://img.php.cn/upload/skill/000/000/081/179033410052138.jpg" alt="PigX UI 前端开发" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="overflowclass">PigX UI 前端开发</a>
<p class="overflowclass">PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>事件委托天然支持“即插即用”：新元素只要符合选择器规则（如 <code>.btn），点击时冒泡到父层即可被识别
appendChild 后再调用 addEventListener，消除了冗余的函数分配和 DOM 查找removeEventListener，避免因遗漏导致的内存泄漏用 event.target + matches() 精准匹配目标
委托监听器内不靠循环或全局缓存判断触发源，而是用轻量方法实时校验：
-
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()），否则委托会失效
