事件委托是通过在父元素绑定监听器并用 e.target 判断触发源来减少 dom 监听器的高效手段；需选稳定语义化的父容器，用 matches()/closest() 精准识别目标，支持动态内容，仅适用于冒泡事件。
直接在父元素上绑定一个事件监听器，用 e.target 判断点击的是哪个子元素，就能替代为每个子元素单独绑定监听器的做法——这是减少 DOM 监听器、节省内存最常用也最有效的手段。
选对父容器再绑定监听器
父容器要满足两个基本条件：一是能包裹所有目标子元素，二是本身稳定不频繁销毁重建。常见选择有 ul（管理 li）、table（管理 tr 或 td）、div#list（管理动态插入的卡片或按钮）等。
- 避免选
document或body作为委托根节点，除非确实需要全局捕获；否则会增加不必要的判断开销和误触发风险 - 优先使用有明确语义和稳定结构的容器，比如
<ul id="task-list"></ul>，而不是靠 class 临时拼凑的 wrapper - 如果子元素类型多样（如按钮、链接、图标混排），可在父容器上加统一 data 属性（如
data-event-scope）辅助识别范围
用 target 匹配真实触发源
事件冒泡到父元素后，必须准确识别出用户真正点中的是哪个子节点。推荐用 e.target.matches() 或 e.target.closest()，它们比手动遍历 classList 更安全、更语义化。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
e.target.matches('.btn-delete')：适用于直接点击目标元素本身（比如删除按钮） -
e.target.closest('.card')：适用于点击卡片内任意位置（包括文字、图片、空白处）都算“点击卡片” - 注意过滤文本节点：
e.target.nodeType === 1可排除 textNode，避免e.target是 span 里的纯文本而报错
动态内容天然支持，无需额外操作
新插入的子元素只要在已绑定监听器的父容器内部，且能正常触发冒泡（即不是 pointer-events: none 或被 stopPropagation() 中断），就会自动被委托逻辑捕获。
- 例如通过
innerHTML += '<li>新任务</li>'或appendChild()添加的li，不需要再调用addEventListener - 若子元素需禁用交互，用
disabled属性或 CSSpointer-events: none即可，不影响委托结构 - 移除子元素时也不用解绑——因为根本没给它单独绑过监听器
避开非冒泡事件和特殊节点
不是所有事件都支持委托。只有冒泡阶段生效的事件才适用，比如 click、mousedown、keyup；而 focus、blur、load 等默认不冒泡，需手动 useCapture 或改用 focusin/focusout。
-
focus和blur应换成focusin和focusout（它们会冒泡） -
input事件虽冒泡，但实时性要求高时慎用委托，可能因判断延迟影响体验 - 确保目标节点是元素节点（
nodeType === 1），避免e.target是注释或文本节点导致matches()报错
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
