17370845950

事件委托利用事件冒泡机制，将子元素事件监听统一绑定到父元素上；只需一次绑定、节省内存、支持动态添加元素、逻辑集中易维护。

事件委托基于事件冒泡机制

当用户点击某个子元素（比如一个 li 或按钮），事件会先在该元素上触发，然后逐层向上传播到它的父元素、祖父元素，最终到达 document。这个向上传播的过程就是“事件冒泡”。事件委托正是利用了这一特性——不给每个子元素单独绑定事件，而是把监听器统一加在它们的共同父元素上。

只绑定一次监听器，大幅减少内存占用

每个事件处理函数都是一个对象，会占据内存空间。如果页面有 500 个列表项，传统方式要创建 500 个函数并分别绑定，不仅耗内存，DOM 查询次数也多，拖慢页面初始化速度。而事件委托只需：

• 选中一次父容器（如 ul 或 div）
• 绑定一个事件监听器（如 click）
• 在回调中用 event.target 判断实际被点击的是哪个子元素

天然支持动态添加的元素

新插入的子元素（比如通过 innerHTML 或 appendChild 添加的 li）无需再调用 addEventListener。只要父元素已有监听器，这些新元素的事件就能自动被捕获和处理。这避免了反复绑定、解绑或维护事件注册表的麻烦。

逻辑集中，更易维护和扩展

所有同类操作（如“所有删除按钮”“所有编辑链接”）可以共用一套判断逻辑：

• 检查 event.target.matches('.delete-btn')
• 或读取 event.target.dataset.id 获取数据标识
• 再执行对应操作，比如发送请求、更新 DOM

不需要为每个元素写重复的回调，也不用担心遗漏新节点。