应使用 input + change + blur 三事件组合监听表单字段变化：input 捕获实时输入（含删除），change 补非键盘触发变更（如日期选择），blur 失焦兜底快照；checkbox/radio 需额外监听 click；每条日志须含 fieldId、timestamp、eventType、value 和 previousValue（变更前缓存）；input 节流 30ms，blur/submi
表单提交时怎么捕获所有字段变化
直接监听 submit 事件不够——它只拿到最终值，抓不到用户中途改了几次、哪项从空变“admin”、哪项被清空又填回。真要记录操作流，得在输入过程中埋点。
推荐用 input + change + blur 三事件组合监听：input 捕获每次键入（含删除），change 补上非键盘触发的变更（比如日期选择器选值），blur 确保失焦时兜底一次快照。
- 避免只绑
input：切换输入法、粘贴后不触发（尤其 Safari） - 避免只绑
change：用户没失焦就关页，变更就丢了 - 对
type="checkbox"和type="radio"，必须监听click，因为它们不触发input
日志里该存哪些字段才够排错
光记 value 不行。用户填错密码两次又删掉，你只看到 “***” → “” → “***”，根本分不清是重输还是误删。关键字段得带上下文。
每条日志至少包含：fieldId（如 "login-password"）、timestamp（毫秒级）、eventType（"input"/"blur"/"submit"）、value（原始值，非脱敏）、previousValue（上一次该字段的值）。
立即学习“前端免费学习笔记（深入）”；
-
previousValue必须在每次变更前缓存，不能靠事后 diff —— 多字段并发修改会串 - 敏感字段（如密码）可本地做哈希（
sha256(value + timestamp)），但别存明文到后端日志 - 不要依赖
form.elements遍历取值：动态增删的字段可能漏掉，优先用事件target自身
防抖和节流怎么选才不丢操作
用户狂敲键盘时，每按一次都发日志？服务器扛不住，前端也卡。但防得太狠，比如 500ms 防抖，连“abc”→“ab”→“abc”这种快速删改都合并成一条，日志就失真了。
真实做法是分层处理：input 事件走轻量节流（30ms），只存变更摘要；blur 和 submit 事件走强制落盘，存完整快照。
- 节流时间设
30ms是经验值：比人眼反应快（100ms），又比 JS 主线程帧率（16ms）宽松，不卡 UI - 千万别对
submit节流——用户点提交，日志必须全量发出，否则失败时无从查起 - 网络失败的日志要进内存队列，页面卸载前用
beforeunload尝试 flush，别依赖sendBeacon——它不保证送达
IE11 或旧版 Safari 怎么兼容事件监听
现代写法 el.addEventListener("input", handler) 在 IE9+ 没问题，但 IE11 对 contenteditable 区域或某些自定义组件的 input 事件支持残缺。老浏览器得降级兜底。
核心策略：检测 input 是否可靠，不可靠时 fallback 到轮询 + selectionStart 变化判断。不过轮询成本高，只对焦点内的字段启用。
- 用
"oninput" in document.createElement("input")判断原生支持 - 对不支持的环境，用
setInterval每100ms查一次el.value和上次值是否不同 - 轮询必须配
focus/blur开关：只在输入框获得焦点时启动，失焦立即 clearInterval
previousValue 的维护时机和 beforeunload 的兜底逻辑——这两处一漏，日志链就断了。 
