change事件是表单元素的失焦后值变更触发事件：input/select/textarea需失焦且值改变才触发，checkbox/radio则选中即触发；非实时，区别于input事件。
change 事件在表单元素（如 input、select、textarea）上，**默认行为是：用户完成交互并失去焦点（blur），且值确实发生了改变时才触发**。它不是实时触发的，也不等同于 input 或 keyup 事件。
change 事件的触发条件
要让 change 正确触发，必须同时满足两个条件：
- 元素失去焦点（blur）：比如用户点击其他地方、按 Tab 键切换、或用鼠标点击页面其他区域；
-
元素的
value值相比聚焦前（focus 时）发生了实际变化：如果用户输入又删光、或改回原值，change 不会触发。
常见误区与注意事项
很多人误以为 change 是“内容一变就触发”，其实不是。例如：
- 用户在
input中输入文字但没离开——change不触发； - 用户修改后又手动删回原始值（比如初始值是
"abc"，输入"abcd"再删成"abc"）——change不触发； - 通过 JavaScript 脚本修改
value（如el.value = "new"）但没触发 blur——change不会自动触发，需手动dispatchEvent(new Event('change'))。
如何正确监听和使用
直接为 input 绑定 change 事件即可，浏览器会按规范自动判断是否满足触发条件：
sc-java-to-ts-interface
下载
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
立即学习“Java免费学习笔记（深入）”；
const input = document.querySelector('input[type="text"]');
input.addEventListener('change', function() {
console.log('内容已改变且已失焦：', this.value);
});
注意：change 对 type="text"、"email"、"number" 等都适用；但对 type="checkbox" 或 type="radio"，它在勾选/取消勾选时立即触发（因为这类控件没有“文本编辑+失焦”的流程，状态切换即视为变更）。
需要实时响应？考虑 input 事件
如果业务要求“内容一变就响应”（比如实时校验、搜索建议），应使用 input 事件：
- 它在每次输入、粘贴、删除等导致 value 变化时立即触发；
- 无需等待失焦；
- 兼容性好（IE9+），且能捕获所有输入方式（包括中文输入法组合过程中的中间态，可通过
event.isComposing过滤）。
