onchange在元素值发生实质性改变且失去焦点后触发，不响应每次按键或未变更的选择；适用于最终确认类逻辑，如表单校验，而非实时交互。
onchange 什么时候触发
它只在 <input>、<select></select>、<textarea></textarea> 元素的值发生**实质性改变**，且元素**失去焦点（blur）** 后才执行。不是每次按键就触发，也不是选中下拉项立刻触发——比如用户在 <input type="text"> 里输入又删光，最后没改内容，就不会触发；又比如在 <select></select> 中点开选项但没换选中项，也不会触发。
常见误判现象：
- 用户边打字边想实时校验？
onchange不行，得用oninput或onkeyup - 用户点了下拉框又点回原选项？值没变，不触发
- 脚本直接赋值
element.value = 'xxx'？这不会自动触发onchange，必须手动dispatchEvent(new Event('change'))
onchange 和 oninput 的关键区别
onchange 是“提交式”响应，oninput 是“输入式”响应。两者语义不同，不能互换。
典型使用场景对比：
- 校验邮箱格式、手机号长度等「最终确认类」逻辑 → 用
onchange，避免干扰用户输入过程 - 搜索框实时过滤、密码强度提示、字符计数 → 用
oninput，需要响应每一次键入 -
onchange在 Safari/iOS 上对type="file"支持稳定；oninput对 file 类型基本无效 -
onchange兼容所有现代浏览器（包括 IE9+），oninput在 IE9-10 有兼容问题
绑定 onchange 的三种写法及风险
不要只记一种写法，不同方式影响可维护性和调试效率。
内联写法（不推荐）：
<input type="text" onchange="validate(this.value)">
问题：逻辑耦合 HTML，无法复用，调试时堆栈难追踪，且 this 指向可能被上下文污染。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
DOM 属性赋值（慎用）：
input.onchange = function() { console.log(this.value); };
缺点：只能绑定一个处理函数，后赋值会覆盖前赋值；this 指向是当前元素，但容易被箭头函数或 call/bind 打乱。
推荐：addEventListener
input.addEventListener('change', (e) => {<br> console.log(e.target.value); // 更可靠获取值<br>});
优势：可多次添加、支持移除（removeEventListener）、事件对象完整、this 安全。
文件上传控件中的 onchange 特殊行为
<input type="file"> 是 onchange 最典型的受益场景——用户选择文件后，只有这时才真正“确定”了上传意图。
注意几个实际坑点：
- 用户重复选择同一个文件（比如选完又点“取消”，再重选）？多数浏览器仍会触发
change，但e.target.files.length可能为 0，需先判断 - 清空文件控件（如
e.target.value = ''）不会触发change，因为这不是用户行为 - 移动端 iOS Safari 对
multiple文件选择的change触发时机略有延迟，建议加防抖或用setTimeout延后读取files - 别依赖
this.value获取文件名，应始终通过e.target.files[0]?.name读取，否则 IE 或旧 Android 会返回假路径
真实项目里最容易被忽略的是：没有区分「用户主动取消选择」和「未做任何操作却触发 change」，结果导致表单校验误报或接口白调一次。处理前务必检查 e.target.files.length 是否大于 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
