事件委托需从event.target出发向上遍历parentelement，设容器为边界并用matches()匹配选择器，先校验target是否为element，匹配成功即break，监听须在冒泡阶段。
<p>事件委托利用父元素监听子元素事件，关键在于从 <code>event.target</code> 出发，用 <code>parentElement</code> 循环向上遍历，直到匹配目标区域（比如某个 class 或 data 属性），而不是直接绑定在深层子节点上。</p> <h3>明确查找终点和条件</h3> <p>不能无限制往上找，需设定停止条件：要么到达指定容器（如 <code>container</code>），要么匹配目标选择器（如 <code>[data-action="delete"]</code>）。否则可能越界到 body 或 html，导致误判。</p>
- 推荐写法：
while (el && el !== container)，把容器作为安全边界 - 匹配时优先用
el.matches(selector)，语义清晰且支持复杂选择器（如.btn[data-type="save"]） - 避免只靠
className或tagName判断，易受干扰（比如按钮里有 span，点击 span 时 tagName 是 "SPAN"）
正确处理 event.target 的初始值
event.target 可能是文本节点、伪元素代理的元素，或被 shadow DOM 隔离的内容。实际使用前建议先做基础校验：
- 用
event.target instanceof Element过滤非元素节点（如 TextNode） - 若项目用 Web Components，需考虑
event.composedPath()[0]替代event.target（兼容 shadow 根内点击） - 不建议直接
event.target.parentElement开始循环——万一 target 就是目标元素，跳过就漏了
循环中及时退出，避免冗余遍历
匹配成功后应立刻 break 或 return，不要继续往上走。常见错误是写成 for 循环却没设终止条件，或用 forEach 无法中途退出。
- 推荐 while + break 模式：
let el = event.target;while (el && el !== container) {if (el.matches('.item-btn')) { handle(el); break; }el = el.parentElement;}
注意事件捕获与冒泡阶段的影响
委托依赖事件冒泡，所以监听必须放在冒泡阶段（第三个参数为 false 或省略）。如果用了 useCapture: true，event.target 仍是原始目标，但 parentElement 查找逻辑不变——只是触发时机提前了，容易在中间层拦截掉，一般不用于委托。
- 确保父容器本身没有
pointer-events: none或visibility: hidden，否则事件可能无法到达 - 动态添加的子元素无需重新绑定，只要它们结构符合向上查找路径即可
- 慎用
stopPropagation()在中间节点——它会切断委托链，使上级监听器收不到事件
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
