表单事件处理需聚焦input、change、submit、focus/blur、invalid五类核心事件，绑定用addEventListener配命名函数，关注event.target、currentTarget、submitter、validity四属性，并防范中文输入、程序触发、回车提交等陷阱。
表单事件处理是 JS 交互开发中最常用也最容易出错的部分。画思维导图时，不追求全覆盖，而要抓住“谁触发、何时触发、怎么响应、如何验证”这四个关键链路，结构清晰、便于复习和查漏。
聚焦核心表单事件类型
不是所有表单相关事件都同等重要。优先梳理以下 5 类高频、有明确语义的原生事件：
- input：实时监听输入内容变化（包括粘贴、删除、键盘输入），推荐用于搜索建议、实时校验
- change：仅在元素失去焦点且值发生实际改变后触发（如 select 选中、checkbox 切换、input 失焦），适合最终确认类逻辑
- submit：表单提交瞬间触发，必须用 event.preventDefault() 阻止默认跳转或刷新，是 AJAX 提交的入口点
- focus / blur：用于控制提示文案显示/隐藏、样式高亮、错误信息清空等 UI 反馈
- invalid：浏览器原生校验失败时触发（配合 required、type="email" 等属性），可自定义错误提示
绑定与解绑要匹配且可维护
避免内存泄漏和重复绑定，推荐统一使用 addEventListener，并确保解绑方式一致：
- 不要混用 onsubmit = handler 和 addEventListener('submit', handler)
- 给 handler 命名函数（而非箭头函数），方便后续 removeEventListener 时精准移除
- 对动态生成的表单（如新增行），用事件委托绑定到父容器，监听 target.tagName === 'INPUT' 且有特定 name 或 class
事件对象里最该关注的属性
表单处理中，event 对象不用记全，但以下 4 个必须熟练：
- event.target：当前触发事件的表单控件（如 input、select），用它取 value、checked、files
- event.currentTarget：绑定事件的元素（常用于事件委托场景，区分 target 和 currentTarget）
- event.submitter（HTML5 新增）：在 submit 事件中，指向真正点击的提交按钮（可用于区分“保存”还是“草稿”）
- event.target.validity：返回 ValidityState 对象，含 valid、valueMissing、typeMismatch 等布尔属性，比单纯 checkValidity() 更细粒度
常见陷阱与防御写法
这些细节不画进导图容易忽略，但线上问题多源于此：
- input 事件无法捕获鼠标右键粘贴后的即时变化？加 compositionstart/compositionend 兜底中文输入法场景
- change 在 checkbox/radio 上只在用户点击时触发，程序设置 checked = true 不会触发——需要手动 dispatchEvent(new Event('change'))
- 表单内回车默认触发表单提交，若只有搜索框无 submit 按钮，需监听 keydown 并拦截 Enter
- 移动端软键盘收起可能触发 blur，但此时 input 值未必已更新完成，建议搭配 setTimeout 或 input 事件做最终确认
