change事件仅在输入框失焦且内容改变时触发，回车需调用blur()间接触发；它不同于实时触发的input事件，适用于确认式操作如校验或提交。
文本框的 change 事件默认就是在失去焦点（blur）且内容发生改变时触发，回车本身不会直接触发 change，但可在回车时主动调用 blur() 来间接触发。关键不是“加监听”，而是理解它的触发条件和如何配合使用。
change 事件的默认行为
change 对 来说，只在以下两个条件**同时满足**时才触发：
- 输入内容相比初始值（或上次失去焦点后的值）发生了变化
- 元素失去了焦点（比如点击页面其他地方、按 Tab 键切换、或代码调用
blur()）
它不会在每次按键、粘贴或输入时触发，也不响应回车键——除非你额外处理回车。
让回车也触发 change 的方法
用户按回车常表示“输入完成”，这时可手动触发失焦，从而激活 change：
- 监听
keydown或keyup，判断是否按下了 Enter（event.key === 'Enter'） - 在回调中调用
inputElement.blur() - 确保
change监听器已提前绑定，这样blur()会自然连带触发它
示例：
const input = document.getElementById('myInput');
input.addEventListener('change', () => {
console.log('内容已变更并确认：', input.value);
});
input.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
input.blur(); // 主动失焦 → 触发 change
}
});注意 input 和 change 的区别
别混淆这两个常用事件：
-
input：每输入一个字符、粘贴、删除都触发，适合实时搜索、格式化 -
change：只在“确认完成”时触发一次，适合最终校验、提交前保存、防重复提交
如果业务需要“回车即提交+校验”，用 keyup + Enter → blur() 配合 change 是简洁可靠的组合。
常见失效原因排查
如果绑了 change 却没反应，检查以下几点：
- 是否在 DOM 加载完成前就尝试获取元素？建议放在
DOMContentLoaded或defer脚本中 - 是否误监听了
input却以为是change？控制台打印事件名可验证 - 初始值和当前值相同，即使失焦也不会触发
change - 用了
v-model（Vue）却没配@change，而只写了@input
