应避免重复绑定事件监听器，需先移除旧监听器或使用事件委托；区分input、change、blur触发时机；submit时必须e.preventdefault()；优先用formdata获取表单值；注意移动端兼容性。
避免重复绑定导致事件多次触发
表单元素（如 input、select、form）在动态渲染或组件复用时，容易因重复执行 addEventListener 而绑定多个相同事件监听器。用户一次操作可能触发多次处理逻辑，比如连续提交、重复校验、数据错乱。
✅ 正确做法：
- 绑定前先移除旧监听器（需保存 handler 引用，不能用匿名函数）
- 使用事件委托（如监听
form元素，通过e.target判断具体控件） - 在单页应用中，确保在组件卸载/销毁时调用
removeEventListener
区分 input、change、blur 的触发时机
很多开发者混淆三者行为，导致实时校验失效或交互延迟：
- input：值变化即触发（包括输入、粘贴、删除、清空），适合实时反馈（如密码强度提示）
-
change：元素失去焦点且值发生改变后触发（
checkbox/radio点击即触发），适合最终确认类操作 - blur：仅失焦触发，不关心值是否变化，适合离开字段时统一收尾（如格式化、隐藏提示）
⚠️ 注意：input 在中文输入法下可能触发“未完成输入”（如拼音阶段），可用 compositionstart/compositionend 过滤。
表单提交默认行为必须显式阻止
直接给 form 绑定 submit 事件却不调用 e.preventDefault()，会导致页面刷新或跳转，Ajax 提交失败、状态丢失。
✅ 安全写法：
- 始终在
submit回调第一行写e.preventDefault() - 校验失败时不要仅靠
return false—— 它在现代事件监听中无效（除非是内联onsubmit） - 推荐统一结构：
if (!validate()) return;+e.preventDefault();+ 后续提交逻辑
获取表单值优先用 FormData，慎用 value 直取
手动遍历每个 input.value 容易遗漏禁用字段、复选框未勾选情况、file 输入的文件对象，还难以处理数组型 name（如 name="hobby[]"）。
✅ 推荐方式：
- 提交前用
new FormData(formElement)一键采集（自动过滤disabled，支持file，兼容多选和数组名） - 需要 JSON 格式时，用
Object.fromEntries(new FormData(form))（注意 IE 不支持，需 polyfill） - 若需响应式监听（如 Vue/React 场景），仍建议用受控组件 + 状态管理，而非反复查 DOM
移动端表单事件兼容性要点
iOS Safari 和部分安卓 WebView 对 input、focus、软键盘弹起等行为有特殊表现：
-
focus()在 iOS 上可能被拦截，需用户真实点击后才生效 - 软键盘弹出会触发
resize或滚动，但无统一事件；可监听focus+setTimeout延迟检测window.innerHeight变化 - 避免在
input中频繁修改value（如格式化手机号），可能导致光标跳位；改用setSelectionRange保持位置
