input事件是实时监听输入框值变化的首选方案，支持键盘输入、粘贴、拖拽、语音输入等所有修改场景，chrome/firefox/safari/edge/ie9+均原生支持。
直接用 input 事件就能实时监听用户在输入框里的所有修改，包括键盘输入、粘贴、拖拽、语音输入、甚至删除——只要值一变就立刻触发，不需要等失焦。
input 事件是首选方案
- 支持元素：
<input type="text">、<input type="password">、<input type="search">、<textarea></textarea>（部分浏览器也支持<select></select>） - 触发时机：值发生变化的瞬间，不依赖焦点状态
- 兼容性：Chrome、Firefox、Safari、Edge、IE9+ 均原生支持
<input type="text" id="search"><script>
document.getElementById('search').addEventListener('input', function(e) {
console.log('当前输入：', e.target.value);
});
</script>
为什么不用 keyup / keydown？
- 按键事件漏掉很多场景：右键粘贴、鼠标拖入文本、语音输入、自动填充、剪贴板粘贴（Ctrl+V）、移动端长按粘贴等
-
keyup在按下组合键（如 Ctrl+V）时可能只触发一次，无法捕获粘贴后的真实内容
需要兼容 IE8 或更老版本？加 onpropertychange
- IE8 及以下不支持
input，但支持onpropertychange（仅 IE） - 它会在
value属性变化时触发（包括 JS 赋值），但需手动过滤propertyName === 'value'
if (input.attachEvent) {
input.attachEvent('onpropertychange', function(e) {
if (e.propertyName === 'value') {
console.log('IE 中的当前值：', e.srcElement.value);
}
});
}
jQuery 写法（简洁兼容）
$('#myInput').on('input propertychange', function() {
const val = $(this).val();
// 执行校验、计数、搜索等逻辑
});
注意事项
-
input事件不会响应 JS 直接赋值（如el.value = 'xxx'），若需监听脚本修改，可配合Object.defineProperty或 MutationObserver（较重，一般不用） - 不要在
input回调里做高耗操作（如频繁 Ajax 请求），建议加防抖（debounce） -
change事件不是实时的，它只在失焦或选择变更（如<select></select>）时触发，不适合实时反馈场景
基本上就这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
