必须用input事件：值一变就立刻响应，如实时搜索、密码校验、字数统计、字段联动；change仅在失焦或回车后触发，适用于表单提交校验、select、file、date等最终确认场景。
用 input 还是 change，取决于你到底想“捕获变化过程”还是“确认最终结果”。选错事件，实时搜索没响应、防抖失效、中文输入法下值丢失——全是因为触发时机理解偏差。
什么时候必须用 input 事件
只要需要「值一变就立刻响应」，就必须用 input。它不等失焦，不等回车，粘贴、拖入、语音输入、甚至中文输入法完成选词上屏后都立即触发。
- 实时搜索框：用户每敲一个字就要发请求（记得加防抖）
- 密码强度校验：输入过程中动态提示强弱
- 字数统计：
textarea里打几个字就更新剩余字数 - 表单字段联动：比如输入手机号自动补全区号或运营商
注意：input 不会触发于 type="checkbox" 或 type="radio"，这类控件仍得用 change。
change 事件真正适用的场景
change 只在「值变了 + 失去焦点」（或回车）后才触发一次，适合做最终确认类操作。
立即学习“前端免费学习笔记（深入）”；
- 表单提交前校验：比如邮箱格式、两次密码是否一致
- 下拉选择器（
select）选项变更后的数据加载 - 文件上传（
input type="file"）选中后触发处理逻辑 - 日期/时间控件（
input type="date"）选完日期才提交
特别注意：change 对 checkbox/radio 是“点击即触发”，因为它们没有“失焦才有变化”的概念；但对文本类控件，它根本不管你在里面打了多久，只认“离开那一刻的值”。
中文输入法下的行为差异
这是最容易踩坑的地方。用户用拼音输入“你好”，在未确认前（还在选词阶段），input 不会触发；只有按下空格或回车把字“上屏”后，input 才会以完整词触发一次。
- 如果需要监听拼音过程（极少见），得配合
compositionstart/compositionend -
change在中文输入法下更晚：必须输完、上屏、再失焦，才触发 - 不要试图用
keydown替代input—— 它捕获不到粘贴、语音、自动填充等行为
验证方式很简单：打开控制台，监听两个事件，亲自用搜狗/百度输入法打几个字，看 console.log 哪个先出、出几次。
兼容性与脚本赋值的陷阱
现代浏览器（IE10+）都支持 input，但 IE9 及以下需 fallback 到 onpropertychange；不过现在基本可忽略。
-
input事件只响应「用户行为导致的 value 变化」，用 JS 写el.value = 'xxx'不会触发它 -
change同样不会被脚本赋值触发，除非手动调用el.dispatchEvent(new Event('change')) - React 的
onChange行为实际等同于原生input，不是传统change
最常被忽略的一点：防抖必须加在 input 回调里，而不是靠换用 change 来“减少触发次数”——后者只是掩盖了问题，会让交互显得迟钝甚至断裂。
