change事件监听输入框值改变且失焦后的提交式变化，不实时触发，仅在用户编辑完成并移开焦点、值确实变化时触发，脚本修改value需手动dispatchevent。
JavaScript 中监听输入框的 change 事件，本质上就是监听元素“值改变且失去焦点”（blur）后的提交式变化，它不会在每次按键时触发，只在用户完成编辑并移开焦点（比如点击其他地方、按 Tab 键切换）时触发。这个行为和 input 事件不同，后者是实时响应每一次输入。
change 事件的触发条件
change 事件只在以下情况发生时触发：
- 用户在
<input type="text">、<textarea></textarea>或<select></select>中修改了内容； - 然后该元素失去焦点（blur），且值确实发生了变化（与初始值或上次 change 后的值不同）；
- 注意：通过 JS 脚本修改
value属性不会自动触发change事件，需手动dispatchEvent。
基础监听写法（原生 JS）
直接为输入框绑定 change 事件监听器即可：
const input = document.getElementById('myInput');
input.addEventListener('change', function(e) {
console.log('最终输入值：', e.target.value);
});
⚠️ 注意：如果用户输入后没失焦（比如直接点提交按钮但输入框仍聚焦），change 就不会触发。此时可考虑补充 blur 或结合 input 事件做兜底。
兼容性与常见误区
change 在所有现代浏览器中都支持，但要注意：
-
不适用于实时校验：比如想让用户一改就提示错误，该用
input事件； - 初始值为空时，清空再失焦不会触发 change：因为值未“变化”（空 → 空）；
-
动态设置 value 后需手动触发：例如
input.value = 'new'; input.dispatchEvent(new Event('change'));； -
表单重置（
<form>.reset()</form>）会触发 change，但仅对被重置的控件生效。
Vue / React 中的对应逻辑
框架通常做了封装，但底层仍依赖原生事件：
-
Vue：
@change直接绑定change事件，v-model默认用的是input，如需 change 行为，可显式写@change="handler"； -
React：
onChange实际绑定的是input事件（为兼容性模拟），若真要监听原生change，可用onBlur+ 手动比对值，或用ref添加原生监听器。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
