input事件在value变化时立即触发，涵盖键盘、粘贴、拖放、语音及JS赋值；例外包括select初始渲染、checkbox/radio点击，以及中文输入法上屏过程的高频触发。
input 事件触发时机与边界条件
只要 value 属性值发生变化，input 事件就立即触发——不管变化来源是键盘输入、粘贴、拖放、语音输入，还是 JS 直接赋值（如 el.value = 'x'）。它不等待失焦，也不判断是否“完成输入”。
但要注意几个典型例外：
-
<select>元素在初始渲染时选中默认项，不会触发input；只有后续切换选项才会触发 -
<input type="checkbox">或<input type="radio">点击时不会触发input，必须用change或click - IE9 及更早版本不支持
input，需降级监听propertychange（2026 年已基本无需考虑） - 高频输入（如中文拼音上屏过程）会连续触发多次，不节流可能卡顿
change 事件真正生效的三个前提
change 不是“值变了就触发”，而是必须同时满足：
- 值确实发生了变化（对比 focus 时刻的初始值）
- 元素已失去焦点（
blur） - 该元素类型符合其触发逻辑：对
<input type="text">和<textarea>是失焦+变值；对<select>是选项切换即触发（无需 blur）；对<input type="checkbox"/"radio">是点击即触发（状态切换即终态）
所以用户输完又删空、最后 blur 时值没变，change 就不会触发——这不是 bug，是设计行为。
立即学习“前端免费学习笔记（深入）”；
type="search" 的清除动作该监听哪个事件
别用 input 或 change 判断清除操作，它们无法区分“用户刚输了个空格”和“点了 ×”。唯一可靠的是 search 事件：
- 只在点击原生 × 按钮或按 Esc 键时触发
- 触发时
this.value已确定为空字符串 - 不冒泡，不能委托，必须直接绑定到
<input type="search">元素上 - Chrome、Edge、Safari 15.4+、Firefox 110+ 全覆盖（2026 年可放心用）
- JS 赋值清空或粘贴后删空，都不会触发它——边界清晰，误判率低
手动触发 change 事件的正确写法
当通过 JS 修改了 value，想让绑定的校验逻辑执行，必须显式触发 change。仅设置 value 不够：
- 原生方式：
el.value = 'new'; el.dispatchEvent(new Event('change', { bubbles: true })); - jQuery 方式：
$('#el').val('new').trigger('change'); - 注意：不要漏掉
bubbles: true（虽然change默认不冒泡，但部分框架依赖它） - 如果同时监听了
input和change，手动触发change前最好先触发input，否则某些实时反馈逻辑会滞后
最易忽略的点：移动端软键盘收起不保证触发 blur，所以依赖 change 做终态校验时，务必在 submit 时兜底重验一次。
