input事件在每次输入变化时立即触发，change事件仅在失焦且值改变后触发；前者适用于实时校验与搜索，后者适合表单提交前验证。
input 事件和 change 事件的区别在哪
监听用户输入，input 事件比 change 更及时：它在每次输入内容变化时触发（包括删除、粘贴、键盘输入），而 change 只在元素失去焦点且值发生改变后才触发。表单校验、实时搜索建议这类场景必须用 input，否则会漏掉中间状态。
-
input事件不冒泡，但可捕获；change冒泡，适合委托 - 在
和上两者都可用；但或推荐用change - 移动端软键盘收起不一定会触发
change，但input在每次键入时已响应
如何正确绑定 input 事件（原生 JS）
直接在 HTML 中写 oninput 属性最简，但推荐用 addEventListener——便于复用、解绑和避免内联脚本污染。
const inputEl = document.querySelector('#search');
inputEl.addEventListener('input', function (e) {
console.log('当前值：', e.target.value);
});
- 不要用
keyup替代input：无法捕获粘贴、拖入、语音输入等非键盘操作 - 注意 IE9+ 支持
input，但 IE9 对propertychange - 如果绑定在父容器上做事件委托，要检查
e.target.tagName === 'INPUT'并过滤非文本类输入框
防抖处理 input 事件的必要性
用户每敲一个键就发请求或校验，会造成大量无效调用。必须加防抖，但不能简单套用通用函数——要确保最后一次输入后才执行，且首次输入不延迟。
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const debouncedSearch = debounce((value) => {
if (value.length > 1) fetch(`/api/search?q=${encodeURIComponent(value)}`);
}, 300);
inputEl.addEventListener('input', (e) => debouncedSearch(e.target.value));
- 延迟设为 200–400ms 较合理：短于 200ms 用户感知不到，长于 500ms 显得卡顿
- 不要在防抖函数里直接读
e.target.value，因为闭包捕获的是触发时刻的值，应显式传参 - 若需取消正在等待的请求（如 Axios），记得在
clearTimeout后调用cancelToken.cancel()
Vue/React 中怎么监听输入而不丢失响应性
框架封装了底层事件，但机制不同：Vue 的 v-model 默认监听 input，React 的受控组件必须用 onChange（实际仍基于 input 事件）。
立即学习“前端免费学习笔记（深入）”；
- Vue 中避免手动写
@input覆盖v-model，除非需要额外逻辑；想兼容 IE 可加.lazy修饰符切到change - React 中不要在
onChange里直接setState({ value: e.target.value })后再调用防抖——会导致 state 更新滞后；应先存原始值，再在防抖回调中读取 - 两者都需注意：输入法组合字符期间（如中文拼音未上屏），
e.target.value可能包含未确认内容，可用e.isComposing过滤
input 事件已把拼音“nihao”当真实输入发出去了。检测 e.isComposing === false 才执行业务逻辑，这一步几乎总被跳过。 
