绝大多数情况下应使用 input 事件而非 change 事件监听输入，因 change 需值改变且失焦才触发，无法捕获用户实时输入；input 实时响应所有输入方式，但需注意防抖、中文输入法兼容及 checkbox/radio 等例外处理。
绝大多数情况下，用 input 事件，而不是 change —— 否则你会收不到用户正在输的内容。
为什么不能只靠 change 监听输入变化
change 不是“值一变就触发”，它必须同时满足两个条件：值确实变了 + 元素失去了焦点（blur）。这意味着：
- 用户在
<input type="text">里打字、删改、粘贴，只要没点别处或按 Tab 切走，change就一直不执行 - 移动端软键盘收起不等于失焦，很多机型根本不会触发
change - 用户输到一半关掉页面，你完全不知道他改过什么
-
<select></select>和<input type="radio">是例外，它们选中即触发change，但这是特例，不是通则
input 事件怎么绑才靠谱
它实时响应所有输入方式（键盘、粘贴、拖拽、语音、自动填充），但要注意几个实操细节：
- 直接写在 HTML 里：
<input oninput="handleInput(this.value)">，简单场景够用 - 推荐用 JS 绑定：
element.addEventListener('input', handler)，便于复用和解耦 - 它不冒泡到
<form></form>，所以不能像submit那样统一监听整个表单——得逐个绑定，或用事件委托（见下一条） - 对
<textarea></textarea>和<input type="number">有效；但对checkbox/radio无效，这些还得用change
如何用事件委托监听整个表单的输入变化
不想一个个字段去绑？可以用委托捕获所有可编辑字段的变更，包括后续 JS 动态插入的：
立即学习“前端免费学习笔记（深入）”；
form.addEventListener('input', e => {
if (e.target.matches('input:not([type="checkbox"]):not([type="radio"]), textarea, select')) {
form.dataset.touched = 'true';
}
});
// 初始化
form.dataset.touched = 'false';
- 注意过滤掉
checkbox和radio，它们不发input事件 - 动态添加的
<input>也会被这个监听捕获，无需重新绑定 - 别漏掉初始化
dataset.touched，否则第一次判断会是undefined
中文输入法下怎么避免拼音阶段误触发
用户用中文输入法时，input 会在“选词完成并上屏”后才触发——这通常是期望行为。但如果你需要更精细控制（比如禁用拼音过程中的预览），就得配合组合事件：
- 监听
compositionstart：进入输入法编辑状态，设isComposing = true - 监听
compositionend：编辑结束，设isComposing = false，再执行真正逻辑 -
input事件里加判断：if (!isComposing) { /* 处理上屏内容 */ } - 注意拼写：
isComposin是常见手误，少了一个g
最常被忽略的其实是性能问题：input 触发太勤，如果每次都在里面调接口或重绘，页面会卡顿。防抖不是可选项，是必选项——哪怕只是 setTimeout 延迟 200ms，也比不加强得多。
