事件委托是自定义组件事件流的核心：需在父容器监听并用closest()判定目标，动态元素须在connectedCallback中绑定与清理，shadow DOM内须attachShadow({mode:'open'})并在shadowRoot内委托，slot内容需监听slotchange并扫描assignedNodes，跨shadow通信须dispatch composed:true的CustomEvent。
事件委托是自定义组件事件流的核心
原生 HTML 没有「组件」概念，所谓自定义组件事件流，本质是靠事件委托 + 自定义事件机制实现的。直接在 shadow DOM 或动态插入的节点上绑定 addEventListener 容易漏绑或重复绑定，必须把监听器挂在父容器（比如 <div id="app">），再根据 event.target 判断是否命中组件内部触发点。
常见错误是：在组件初始化时对每个按钮都调用 button.addEventListener('click', handler)，结果组件重渲染后新节点没绑定，旧节点残留监听器，导致事件响应错乱或内存泄漏。
- 始终优先用
document.getElementById('container').addEventListener('click', e => { ... })，而非遍历子节点绑定 - 用
e.target.matches('.my-button')或e.target.closest('[data-role="submit-btn"]')做触发判定，比 classList.contains 更健壮 - 避免在事件回调里直接操作
e.target的 DOM 属性（如e.target.disabled = true），应通过状态驱动更新，否则 SSR 或 hydrate 时会不一致
用 CustomEvent 实现跨层级通信
HTML 自定义组件之间不能靠 props 传函数，得靠事件系统解耦。直接用 dispatchEvent(new CustomEvent('submit', { detail: { value: 'abc' } })) 是最轻量的方式，但要注意浏览器兼容性和序列化限制。
容易踩的坑是：往 detail 里传函数、DOM 元素或循环引用对象，导致事件无法被正确 dispatch 或在 IE/旧 Safari 中静默失败。
立即学习“前端免费学习笔记（深入）”；
-
detail只放可序列化数据（字符串、数字、纯对象、数组），不要传this、event或Node - 监听时必须用
composed: true和capture: false组合，否则 shadow DOM 外部收不到事件：el.addEventListener('submit', handler, { composed: true }) - 避免用
event.preventDefault()阻止原生行为后再手动 dispatch 自定义事件——这会让表单 submit 等默认流程中断，应改用event.stopPropagation()控制冒泡范围
避免事件重复触发的三个关键点
自定义组件常因模板重复渲染、事件监听叠加、debounce 缺失导致同一动作触发多次事件，比如点击按钮后 submit 事件被发了三遍。
这不是逻辑写错了，而是生命周期管理没跟上 DOM 变化节奏。
- 每次重新挂载组件前，先调用
element.removeEventListener('click', handler)清理旧监听器（推荐用AbortController：绑定时传{ signal: controller.signal }，销毁时controller.abort()） - 对高频事件（如 input、scroll）加
setTimeout或requestAnimationFrame节流，但注意input事件本身已有防抖特性，过度节流反而丢失用户输入 - 禁止在模板中写
@click="handleSubmit"这类框架式语法——纯 HTML 场景下，所有事件绑定必须显式通过 JS 控制，且绑定时机要严格落在 DOM ready 之后、组件 render 完成之前
shadow DOM 下事件流的特殊处理
如果组件用了 attachShadow({ mode: 'closed' })，外部就无法监听内部事件，哪怕设置了 composed: true 也无效。必须用 mode: 'open'，否则事件流就被截断了。
另一个现实问题是：某些 UI 库（如 Ionic）内部用了 closed shadow，你封装的自定义事件根本透不出去，这时候只能退回到 light DOM 渲染，或改用 MutationObserver 监听 DOM 变化间接推断状态。
- 检查 shadow root 类型：
el.shadowRoot?.mode === 'open'，不是就别指望事件能穿透 - 在 shadow 内部 dispatch 事件时，
composed: true是必须项；在 light DOM 中监听时，也要确保监听器注册在能接收到该事件的祖先节点上（不能只监听 document） - 不要依赖
event.path——它在 Firefox 和部分移动端浏览器中不可靠，改用event.composedPath()获取传播路径
