submit 事件用于表单提交前整体校验与阻断，必须监听 form 元素；change 事件在控件值变更并失焦后触发，仅反映最终值变化，不参与提交流程，需单独监听控件。
表单提交（submit）和输入值变更（change）是两类不同语义、触发时机与拦截方式的事件，不能混用或互相替代。
submit 事件：只在表单提交时触发，用于整体校验与阻断提交
submit 是 <form> 元素上的事件，当用户点击提交按钮、按回车（且焦点在可提交控件上）等触发表单提交行为时触发。它发生在浏览器准备发送数据前，此时可调用 event.preventDefault() 阻止默认提交动作。
- 监听对象必须是
form元素，不是内部的input或button - 即使表单内没有
submit类型按钮，只要触发了“提交语义”（如回车），也会触发 - 适合做统一校验、防重复提交、异步提交（如用 fetch 替代跳转）
change 事件：值真正改变且失焦后触发，不涉及提交流程
change 是表单控件（如 input、select、textarea）上的事件，仅在用户修改内容并 ** 离开该控件 **（blur）后才触发（type="checkbox" 或 type="radio" 是点击即触发）。它与提交无关，无法阻止表单提交。
- 不会冒泡到
form，需单独监听每个控件或委托到父容器 - 不适合实时校验用户名是否可用（因延迟失焦），此时应选
input事件 - 适合记录最终选定值（如切换下拉选项后保存偏好）
常见误用与纠正
有人试图在 input 上监听 change 并调用 preventDefault() 来阻止表单提交——这无效，因为 change 事件本身不携带提交行为，也没有默认提交动作可阻止。
立即学习 “Java 免费学习笔记（深入）”；
- 想拦截提交？只在
form.onsubmit或form.addEventListener('submit', ……)中处理 - 想响应输入变化？优先用
input（实时）、次选change（确认后） - 混合使用时注意：先有
change（用户改完），再有submit（用户提交），二者无因果关系
一个典型配合示例
邮箱输入框实时检查格式（input），下拉菜单选完存值（change），最终点提交时统一对所有字段校验并决定是否发请求（submit）：
（代码示意）
form.addEventListener('submit', e => { if (!isValidEmail(emailInput.value)) {e.preventDefault(); // 阻止提交 showErrorMessage('邮箱格式不对'); } }); emailInput.addEventListener('input', () => {validateEmailLive(); }); roleSelect.addEventListener('change', () => {saveUserPreference(roleSelect.value); }); 
