事件委托通过在父节点绑定单个监听器，利用事件冒泡和e.target识别子节点，避免重复绑定、节省内存、支持动态节点；需选就近稳定父容器、监听可冒泡事件、用closest等安全匹配目标。
用事件委托机制在父节点上统一管理海量子节点事件，核心就一句话：只给父节点绑一个监听器，靠事件冒泡 + 判断 e.target 来识别真正被点击的是哪个子节点。
为什么必须用父节点而不是逐个绑定
假设页面里有 500 个按钮、列表项或卡片，每个都单独绑 click 事件，就会创建 500 个监听函数实例。这不仅吃内存，还会拖慢初始化速度，更麻烦的是——后续动态插入的新节点完全没事件响应。而事件委托只需一次 DOM 查询、一次 addEventListener，所有现有和未来新增的子节点都能自动“接入”处理逻辑。
关键三步：选对父节点、监听冒泡事件、精准识别目标
- 选父节点要够近、够稳：优先选直接包裹所有目标子节点的容器（比如 ul、div.list、section.items），避免选 document 或 body 这类太顶层的节点，否则判断逻辑会变复杂，还可能误触其他区域
- 只监听能冒泡的事件：click、input、keydown、submit 等天然支持冒泡；focus、blur、mouseenter、mouseleave 不冒泡，不能直接用原生委托（需配合 focusin/focusout 等替代方案）
- 用 e.target 区分真实触发源：e.target 是实际被点击的最深子元素（可能是 span、i、button），不是父容器；常用判断方式包括：e.target.matches('.btn-delete')、e.target.closest('li')、e.target.tagName === 'BUTTON'
Vue 中怎么写更简洁
Vue 模板里直接在父容器上写 @click="handleListClick" 即可。在方法中用 event.target 或更推荐的 event.target.closest('selector') 定位操作项：
methods: { handleListClick(e) { const item = e.target.closest('.list-item'); if (item) { const id = item.dataset.id; this.deleteItem(id); } } }
注意别加 .stop 修饰符，它会阻断冒泡，让委托失效。
常见陷阱和绕过办法
- 文本节点干扰：e.target 可能是 li 里的纯文本或空格节点（Node.nodeType === 3），所以别直接用 e.target === liElement，改用 closest() 或 tagName 判断更安全
- 事件源嵌套太深：比如按钮里有图标 和文字，点击图标时 e.target 是 i 元素。用 e.target.closest('.action-btn') 能自动往上找，比层层 parentNode 更可靠
- 动态内容未生效：确保父容器在监听器绑定时已存在于 DOM；用 useEffect（React）或 mounted（Vue）等生命周期钩子保证时机
