oninput能捕获所有输入方式的实时变化（含粘贴、拖入、语音、自动填充），onkeyup仅响应键盘抬起，漏掉非键盘操作；onchange则需失焦才触发，不满足实时需求。
oninput 事件和 onkeyup 的关键区别
直接说结论：oninput 能捕获所有输入方式的实时变化（包括粘贴、拖入、语音输入、自动填充），而 onkeyup 只响应键盘抬起，漏掉非键盘操作。如果你要校验手机号、实时过滤搜索词、或同步更新预览内容，必须用 oninput。
常见错误是把 oninput 和 onchange 混用——后者只在失焦且值改变时触发，完全不满足“实时”需求。
基础写法与防抖必要性
直接绑定 oninput 很简单，但高频触发会拖慢页面，尤其做接口请求或复杂计算时。必须加防抖（debounce），不能只靠 setTimeout 简单包裹就完事。
- 用
addEventListener绑定比内联写法更可控：<input id="search"> <script> const input = document.getElementById('search'); let timer; input.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(() => { console.log('当前值：', input.value); }, 300); }); </script> - 注意：不要在
input元素上同时写oninput属性和addEventListener，容易冲突；优先选后者 - 防抖时间设为 200–400ms 是经验区间；低于 150ms 用户感知不到延迟，高于 500ms 显得卡顿
处理中文输入法组合字符的坑
用户用中文输入法打字时，oninput 会在“拼音阶段”就触发（比如刚敲下 “zhong”，还没选字），导致拿到的是不完整拼音而非最终汉字。这不是 bug，是浏览器标准行为。
立即学习“前端免费学习笔记（深入）”；
- 若需等输入完成再响应（如搜索建议），要结合
compositionstart/compositionend判断：let isComposing = false; input.addEventListener('compositionstart', () => isComposing = true); input.addEventListener('compositionend', () => { isComposing = false; // 此时才真正拿到汉字，可执行搜索逻辑 }); input.addEventListener('input', () => { if (!isComposing) { // 安全地处理最终值 } }); - 不加这个判断，用户搜“北京”，可能刚输“bei”就发了一次请求，浪费资源还干扰体验
- 移动端 Safari 对
composition事件支持较晚（iOS 13.4+），如需兼容旧版，得 fallback 到定时检测input.value是否稳定
React/Vue 中的等效实现要点
框架里没有直接写 oninput 属性的必要，但底层机制仍依赖它。关键不是语法，而是别被框架的“合成事件”带偏。
- React 中用
onChange即可——它在底层已自动绑定input事件，不是原生change；但要注意受控组件必须同步更新value，否则输入会卡住 - Vue 3 的
v-model默认监听input，但若手动用@input，记得加.lazy修饰符会退化成change，失去实时性 - 框架里做防抖，别在事件回调里直接
setTimeout，应封装成独立 hook 或 composable，避免每次渲染都新建 timer
最常被忽略的一点：服务端返回数据后，前端没清空防抖 timer，导致后续输入被错误覆盖或延迟响应。timer 必须和 input 实例生命周期严格绑定。
