自定义事件漏触发或只响一次是因为htmx对同一event实例默认去重，需每次新建事件对象；customevent的detail须可序列化且监听端应主动校验；高频事件中应避免直接dispatch，改用requestanimationframe节流；localstorage变更需桥接自定义事件并注意监听生命周期。
为什么自定义事件监听会漏触发或只响一次
根本不是监听写错了，而是事件对象被 HTMX 或浏览器内部机制“记住了”。比如用 hx-trigger="send-message from:document" 时，HTMX 默认对同一 Event 实例只处理一次——它内部维护了 handledFor 缓存，靠内存地址去重。你复用同一个 sendMessageEvent 变量反复 dispatch，HTMX 就当它是“已处理过”的旧对象，直接跳过。
原生 addEventListener 还能收到，是因为 DOM 事件系统不干这事；但 HTMX 层已经静默拦截了。这不是 Bug，是设计行为。
- 常见现象：首次 Enter 发请求，之后按再多次也无反应，控制台没报错、Network 里没新请求
- 调试线索：在
dispatch前打个console.log(sendMessageEvent)，发现每次打印的Event对象[[Prototype]]地址一样 - 错误写法：
const evt = new Event("send-message"); document.dispatchEvent(evt);（只创建一次） - 正确写法：
document.dispatchEvent(new Event("send-message"));（每次新建）
addEventListener 监听 CustomEvent 的兼容性陷阱
用 new CustomEvent() 创建事件时，detail 字段必须是可序列化值（如 plain object、string、number），不能传函数、DOM 节点或循环引用对象。否则在 Safari 或旧版 Chrome 中可能静默失败，甚至导致整个事件派发中断。
更隐蔽的问题是：如果你在 CustomEvent 构造时漏写 detail，某些浏览器会把 event.detail 设为 undefined，而另一些设为 null，业务逻辑里若只判 == null 就可能漏分支。
- 安全写法：
new CustomEvent("ui-action", { detail: { type: "save", payload: {} } }) - 避免：
new CustomEvent("ui-action", { detail: someElement })（DOM 节点不可序列化） - 监听端要主动检查：
if (e.detail && typeof e.detail === 'object')，别直接解构 - 跨 iframe 场景下，
CustomEvent无法穿透，需改用window.postMessage
scroll / resize 类高频事件里监听自定义事件的性能坑
在 scroll 回调里频繁 dispatchEvent 自定义事件，本身不卡，但会放大两个问题：一是事件队列积压，二是监听器执行时机不可控。尤其当你在 scroll 里 dispatch "viewport-change"，又在别处监听它来触发动态加载，很容易因滚动帧率高、事件堆积，导致懒加载重复触发或错失关键帧。
真正该做的是把自定义事件当作“信号中转站”，而不是“执行入口”。它的职责应是通知状态变更，具体逻辑交给独立调度器。
- 别这样：
window.addEventListener("scroll", () => { document.dispatchEvent(new CustomEvent("in-viewport")); }); - 改成：
let ticking = false; window.addEventListener("scroll", () => { if (!ticking) { requestAnimationFrame(() => { document.dispatchEvent(new CustomEvent("scroll-stable")); ticking = false; }); ticking = true; } }); - 监听
"scroll-stable"的 handler 里再判断是否进入视口，而不是在 scroll 里实时算 - 如果只是状态同步，优先用
IntersectionObserver替代手动 dispatch
LocalStorage 变化监听与自定义事件联动的边界
storage 事件只在同域其他标签页修改 localStorage 时触发，当前页改完不会触发自己。所以很多人想用它广播状态变更，结果发现“本页改了，本页收不到”。这时候加一层自定义事件桥接是常见解法，但要注意生命周期和作用域。
最易踩的坑是监听器注册时机不对：如果在 DOMContentLoaded 前就监听 storage，可能错过初始化写入；如果在单页应用路由切换后没清理旧监听器，会导致重复绑定。
- 推荐模式：封装一个
syncStorage工具函数，在写入localStorage后立即dispatchEvent(new CustomEvent("storage-sync", { detail })) - 监听统一走自定义事件，而非混用
storage+CustomEvent - 避免在组件
mounted钩子里无条件addEventListener("storage-sync", ...)，记得在unmounted里removeEventListener - 注意：Safari 私密模式下
localStorage可能被禁用，storage事件永不触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
