input事件是监听输入框值变化的首选，但仅响应用户主动完成的输入，不响应js赋值或自动填充；change需失焦才触发，移动端兼容性差；应使用addeventlistener绑定并注意中文输入法的composition事件。
input 事件是监听 <input> 和 <textarea></textarea> 值变化的首选，但它不是“值一变就触发”的万能钩子——它只响应用户主动完成的输入动作，不响应 JS 赋值或浏览器自动填充。
为什么不能直接用 change 替代 input
change 必须同时满足“值变了”和“元素失焦”两个条件。这意味着：
- 用户在输入框里打字、删改、粘贴，只要没点别处或按 Tab 切走，
change就一直不执行 - 移动端软键盘收起 ≠ 失焦，很多安卓机型根本不会触发
change - 用户输到一半关掉页面，你完全收不到任何变更信号
-
<select></select>和<input type="radio">是例外，它们选中即触发change，但这属于特例，不能推广
怎么绑才不会漏触发、不重复执行
推荐用 addEventListener 绑定，避免内联写法耦合 HTML 或 el.oninput = handler 覆盖前序逻辑：
- 确保 DOM 已加载完成再绑定，否则
document.querySelector返回null - 动态插入的表单字段（如 Vue/React 渲染）需在节点挂载后绑定，或改用事件委托
- 多次调用
addEventListener('input', handler)会注册多个相同监听器，导致 handler 执行多次 - 若需移除，必须传入与绑定时完全相同的函数引用——匿名函数无法被
removeEventListener清理
中文输入法下怎么避免拼音阶段误判
用户敲「zhong」还没选词时，input 不会触发；直到空格确认「中」，才触发一次。这是合理行为，但如果你需要更细粒度控制（比如禁用拼音过程中的预览请求），就得配合组合事件：
- 监听
compositionstart：设isComposing = true - 监听
compositionend：设isComposing = false，再执行真正校验或搜索逻辑 - 在
input回调里加守卫：if (!isComposing) { /* 处理上屏内容 */ } - 漏掉
compositionstart会导致每敲一个拼音字母就发一次请求；漏掉compositionend则可能永远不触发最终逻辑
移动端软键盘弹出时的兼容性坑
iOS Safari 某些版本对 input 事件有延迟，尤其在中文输入法下——用户点选候选词后，事件可能滞后几十毫秒；部分安卓 WebView 甚至会在软键盘收起后才补发一次。若业务强依赖“输入即响应”（如密码强度实时提示），仅靠 input 不够稳妥：
- 必须补充监听
compositionstart和compositionend - 不要依赖
input做关键业务拦截（如禁止提交弱密码），应结合blur或提交时双重确认 - 初始化已有默认值的输入框时，记得手动触发一次
dispatchEvent(new Event('input', { bubbles: true }))，否则后续逻辑可能误判为“未修改”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
