事件委托通过将监听器绑定到父容器而非每个子元素，显著降低内存占用与初始化开销；需选择靠近目标、生命周期稳定且不被重写的容器；推荐使用closest()精准识别目标，Vue中结合@click与vei机制更简洁高效，天然支持动态内容。
直接在大量子元素上绑定事件监听器，会带来明显性能负担——每个监听器占用 2–4KB 内存，初始化是 O(n) 复杂度，动态增删还要反复绑定/清理。事件委托把监听逻辑“上收”到父容器，用一次绑定替代 N 次，内存和初始化开销大幅下降。
选对委托容器很关键
不是随便找个父级就行，得满足三个条件：离目标近、生命周期稳定、不被粗暴重写。
- ✅ 推荐：
<ul id="order-list">、<div class="user-card-grid">、<table id="report-table"> - ❌ 避免：
document或body——冒泡路径太长，易被中途拦截，也容易受全局脚本干扰 - ⚠️ 注意：如果容器本身用
innerHTML =或replaceWith()替换，监听器就丢了。应确保它由 JS 控制、只做 append/remove 子节点操作
精准识别点击目标
不能直接拿 e.target 当按钮用，尤其当按钮里有图标或文字时，e.target 可能是子元素。要用语义化方式安全定位。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
e.target.closest('[data-action="delete"]')—— 最推荐，能捕获点击在按钮任意内部区域的情况 -
e.target.matches('.status-toggle')—— 适合目标就是元素本身（无嵌套）的场景 - 避免硬编码判断，比如
e.target.tagName === 'BUTTON'，结构一改就失效 - 过滤逻辑尽量轻量，别在 click 回调里跑复杂查询或正则
Vue 中的写法更简洁
Vue 模板里不用手动调 addEventListener，直接在父元素用 @click，再在方法里做目标识别。
立即学习“前端免费学习笔记（深入）”；
- 模板示例：
<ul @click="onItemClick"><li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}<button class="del">删</button></li></ul> - 方法内处理：
onItemClick(e) { const btn = e.target.closest('.del'); if (btn) { const id = btn.closest('li').dataset.id; this.delete(id); } } - 配合
vei机制，Vue 会复用事件调度器，避免重复增删原生监听器，进一步降低开销
天然支持动态内容
这是事件委托最省心的一点：后续通过 JS 插入的新元素，只要在委托容器内，无需任何额外操作就能响应事件。
- AJAX 加载新列表项？直接
append()进去就行 - 用户新增一条记录？塞进容器，点击逻辑自动生效
- 彻底省去维护“已绑定状态”映射表、避免遗漏绑定导致交互失效
