input事件仅在用户完成输入动作后触发，非值变更即发；需手动dispatchEvent模拟；须兼容IE低版本propertychange、中文输入法composition状态及动态元素委托。
input事件能监听value变化，但只响应用户主动输入
直接改 input.value 不会触发 input 事件——它不是“值一变就发”，而是“用户完成一次输入动作后发”。比如你用 JS 执行 el.value = 'abc';，页面上值变了，但监听函数不会执行。想让它触发，得手动补发：el.dispatchEvent(new Event('input', { bubbles: true }));。
常见误操作包括：
- 把自动填充（autofill）当成用户输入，结果 Safari 下不触发
input事件 - 用
keyup替代，漏掉粘贴、拖放、语音输入等场景 - 在 Vue/React 中依赖响应式更新，却忘了 DOM 层的
input事件仍需显式 dispatch
IE9以下必须用propertychange兜底，但要注意兼容陷阱
propertychange 是 IE 专属非标准事件，IE9+ 已支持 input，但低版本仍需兼容。它会在任何属性变更时触发（不只是 value），所以必须过滤：if (e.propertyName !== 'value') return;。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 不能只绑
propertychange，否则 Chrome/Firefox 不响应；也不能只绑input，否则 IE8 直接失效 - 用
attachEvent绑定propertychange，用addEventListener绑定input，两者逻辑要统一 - IE9 存在右键「剪切」「删除」不触发的 bug，目前无完美绕过方案
中文输入法下必须配合compositionstart/end
用户敲「shu」还没选词时，input 不触发；确认上屏成「输」才触发。这是正常行为，但如果你的业务逻辑（如搜索建议）在拼音阶段就发请求，就会频繁误触。
正确做法是加状态守卫：
- 监听
compositionstart：设isComposing = true - 监听
compositionend：设isComposing = false，再执行真实逻辑 -
input回调里加判断：if (!isComposing) { /* 处理上屏内容 */ } - 漏掉
compositionstart，中文用户每按一个键都可能触发；漏掉compositionend，最终确认永远不进逻辑
动态插入的input元素无需重复绑定，但委托要过滤类型
把监听器挂到父容器（如 form）上，用事件委托捕获所有后代 input 和 textarea 的 input 事件，比逐个绑定更可靠。
关键细节：
-
checkbox和radio不触发input事件，必须用change，委托时要用e.target.matches('input:not([type="checkbox"]):not([type="radio"]), textarea')过滤 - 初始值不会自动触发
input，如果表单加载后已有默认值，需手动dispatchEvent或首次读取做校验 -
select虽然支持input，但实际中几乎都用change，因为它的值只在选择后变，没有中间态
最常被忽略的是初始化同步和输入法状态管理——这两处出问题，用户感知就是“有时候灵有时候不灵”，排查起来特别费时间。
