事件委托是利用事件冒泡机制将子元素事件处理上收至父元素统一管理的技术，通过在父元素监听并用event.target识别实际目标，实现节省内存、适配动态内容、集中维护和简化解绑。
事件委托是一种把子元素的事件处理逻辑“上收”到父元素统一管理的技术，核心靠的是浏览器的事件冒泡机制。它不追求给每个子元素都绑监听器，而是让父元素“代劳”，既省资源，又适配动态内容。
事件委托怎么工作的
当点击一个 li 元素时，事件不会只停在它身上——它会一层层往上传，经过 ul、div、body，直到 document。事件委托就是抓住这个“上传过程”，在父元素（比如 ul）上监听，再用 event.target 判断实际被点的是哪个子元素。
- 绑定一次监听器：只在父容器上调用 addEventListener
- 运行时识别目标：通过 event.target 拿到真实触发事件的 DOM 节点
- 按需执行逻辑：比如检查 target.tagName === 'LI' 或 target.classList.contains('btn-delete')
它为什么能优化事件处理
传统方式为每个按钮、每行表格、每个列表项单独绑定事件，容易造成性能瓶颈；事件委托从根源上规避了这些问题。
- 内存更少：100 个列表项，传统方式要建 100 个监听器；委托方式只要 1 个
- 动态内容零适配：后续用 JS 新增的 li，无需重新绑定，点击照常响应
- 代码更集中：所有点击逻辑写在一个函数里，增删改查都好维护
- 解绑更简单：只需移除父元素上的监听器，不用遍历清理子元素
适合用事件委托的典型场景
不是所有地方都得用，但以下几类特别合适：
- 动态生成的列表或表格（如待办任务、商品列表、评论流）
- 大量功能按钮共存的区域（如操作栏里的“编辑”“删除”“复制”图标）
- 表单内多个输入控件需统一响应（如实时校验、联动显示）
- 富文本或可编辑区域中嵌套的交互元素（如高亮词、插入卡片）
和防抖、节流搭配效果更好
对于高频事件（如滚动、窗口缩放、输入搜索），事件委托本身解决的是“谁来监听”的问题；而防抖/节流解决的是“多久执行一次”。两者可以叠加使用：
- 在父容器上用委托监听 input 事件
- 处理函数内部套一层防抖，避免每敲一个字就发请求
- 滚动容器内有上百个模块？委托 + 节流可确保位置计算不卡顿
