事件委托通过父元素统一监听子元素事件，减少监听器数量、降低内存占用并提升性能；利用事件冒泡与target判断触发源，支持动态内容且便于清理；建议结合虚拟滚动进一步优化。
事件委托通过把多个子元素的事件监听统一交给父元素处理，大幅减少监听器数量，从而降低内存占用和提升性能。
用父元素监听代替每个子项单独绑定
当列表有成百上千项时，为每个 <li> 单独加 click 监听器，会创建同等数量的函数引用和事件对象闭包，极易引发内存堆积。改用事件委托后，只需在父容器（如 <ul></ul>）上绑定一个监听器即可。
- 原始写法（不推荐）：每项都 new Function()，内存随条目线性增长
- 委托写法（推荐）：仅一个函数实例，无论渲染 10 条还是 10 万条，监听器数量恒为 1
利用事件冒泡与 target 判断触发源
点击子元素后，事件会向上冒泡到父容器。在父级监听器中，通过 event.target 获取实际被点击的元素，并结合选择器判断是否属于目标子项。
Java Linux版
下载
Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
- 用
event.target.matches('.item-btn')或event.target.closest('.item-action')精准定位操作区域 - 避免直接操作
event.target可能是文本节点或内嵌标签，closest()更健壮 - 可配合
dataset存储 ID 或类型信息，避免 DOM 查询开销
注意动态内容与事件清理边界
委托监听天然支持后续动态插入的子元素，无需重新绑定；但也要警惕“过度委托”带来的副作用。
- 不要把整个
document当委托根——太宽泛会导致无关点击也被捕获，增加判断负担 - 合理选择最近公共父容器（如列表容器
id="order-list"），平衡冒泡层级与作用域精度 - 组件卸载时，只需移除父容器上的单个监听器，不用遍历清理子项，避免遗漏导致内存泄漏
搭配虚拟滚动进一步释放内存压力
事件委托解决的是监听器数量问题，但海量数据仍可能因全量渲染导致 DOM 节点过多。建议与虚拟滚动结合使用：
- 只渲染可视区域 + 少量缓冲区的 DOM 节点（例如 20–30 个
<li>） - 委托监听依然挂在滚动容器上，事件逻辑不变
- DOM 节点复用 + 监听器极简，双重优化内存与重排重绘开销
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
