埋点必须与组件生命周期对齐，禁用内联onclick；应通过框架钩子（如Vue的onMounted）或自定义元素生命周期注册/清理；优先使用data-*属性声明元信息并委托事件监听，SSR场景需在DOMContentLoaded时启用采集。
埋点代码必须和组件生命周期对齐
直接在 HTML 模板里写 onclick="logEvent('button-click')" 看似简单，但组件销毁后事件监听器可能残留，或 SSR 渲染时执行失败。真正可靠的埋点要绑定在组件 mount / unmount 阶段，而不是靠内联 JS。
比如 Vue 中用 onMounted + onUnmounted 注册/清理监听；React 用 useEffect 返回清理函数；Svelte 用 onMount 和 onDestroy。HTML 本身不提供生命周期钩子，所以「纯 HTML 实现组件级埋点」本质是个伪命题——你得依赖框架或自定义元素的生命周期 API。
- 不要在
<button onclick="...">里写业务埋点逻辑，它无法感知组件是否还存在 - SSR 场景下，
document.getElementById在服务端执行会报ReferenceError: document is not defined - 如果非要用 HTML 原生方式，只能借助
customElements.define定义自定义元素，在connectedCallback里初始化埋点，在disconnectedCallback里卸载
用 data-* 属性声明埋点元信息，而非硬编码参数
把埋点字段（如事件名、模块路径、实验分组）塞进 HTML 属性里，能让 JS 埋点逻辑复用，也方便后续统一采集和规则匹配。
例如：<div data-log-event="card-view" data-log-module="product-list" data-log-exp="v2">。采集脚本只需监听委托事件，读取 event.target.dataset.logEvent 即可上报，不用为每个按钮单独写 handler。
立即学习“前端免费学习笔记（深入）”；
-
data-log-*命名统一用 kebab-case，避免大小写混淆（dataset会自动转成小驼峰，但原始属性名保持一致更可控） - 敏感字段（如用户 ID）禁止放在
data-属性里，应由 JS 侧从状态管理中动态注入 - 避免嵌套过深：不要用
data-log-payload='{"a":1,"b":2}'，JSON 字符串解析失败难排查，拆成多个data-log-a="1"更健壮
委托事件监听比遍历绑定更安全
组件动态渲染、列表重绘、条件显示都会导致 DOM 节点增删。逐个调用 addEventListener 容易漏绑、重复绑、内存泄漏。正确做法是用事件委托，监听父容器，再根据 event.target 匹配 data-log-event。
示例采集逻辑（挂载在 document 或组件根节点）：
document.addEventListener('click', (e) => {
const target = e.target.closest('[data-log-event]');
if (!target) return;
const event = target.dataset.logEvent;
const module = target.dataset.logModule || 'unknown';
sendLog({ event, module, timestamp: Date.now() });
});- 用
closest()而不是getAttribute()，能捕获子元素触发但埋点定义在父容器上的场景 - 避免监听
document全局，优先绑定到组件根 DOM 节点，减少干扰和性能开销 - 注意表单控件（
<input type="checkbox">）点击时event.target是 input 本身，它通常没有data-log-event，需向上找父容器
服务端渲染（SSR）下如何保证首次交互可埋点
Vue/Next/Nuxt 等 SSR 应用首屏 HTML 已含 data-log-* 属性，但 JS 尚未执行，委托监听没挂上——用户快速点击会丢失日志。必须确保采集脚本在 DOM ready 后立即生效，且不依赖框架初始化完成。
- 把采集逻辑写在
<script>标签里，放在<body>底部或使用defer，不要等window.onload（太晚） - 不要等
app.mount()再启动埋点，否则首屏交互全丢；应在DOMContentLoaded阶段就启用委托监听 - 若使用模块打包，把埋点逻辑单独抽成
log-collector.js，不依赖框架运行时，确保最小耦合
真正难的不是怎么写一行 logEvent()，而是让这行代码在组件创建、更新、销毁、SSR、CSR 切换所有路径下都稳定触发——边界情况比想象中多得多。
