input事件能监听粘贴、拖放、语音输入等用户主动输入，但不响应JS赋值或浏览器自动填充；中文输入需配合compositionstart/end避免拼音过程误触发。
input 事件本身就能监听非键盘触发的内容变更，不需要额外 hack —— 只要内容是“用户主动输入”的，包括粘贴、拖放、语音输入、emoji 面板插入、软键盘选词上屏，它都会触发。
为什么 input 事件能覆盖粘贴和拖放
因为 input 的设计语义就是「一次用户输入动作完成」，不是「一次按键」。浏览器把以下操作都归为“输入动作”：
- Ctrl+V / Cmd+V 粘贴文本（含富文本、HTML 片段）
- 鼠标拖拽文本到
<input>或<textarea> - 移动端软键盘的「粘贴」按钮、语音转文字、emoji 选择面板
- 中文/日文输入法确认上屏（但不包括拼音未完成阶段）
注意：input 不会响应 JS 赋值（如 el.value = 'xxx'），也不响应浏览器自动填充（autofill）在 Safari 中的默认行为——除非你显式加了 autocomplete 属性并开启对应策略。
如何避免中文输入法拼音过程误触发
用户敲「shu」还没选词时，input 不会触发；但如果你绑定了其他逻辑（比如搜索建议），可能需要更细粒度控制。此时必须配合组合事件：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
compositionstart：设isComposing = true - 监听
compositionend：设isComposing = false，再执行真实业务逻辑 - 在
input回调里加守卫：if (!isComposing) { /* 处理上屏后的内容 */ }
漏掉 compositionstart 会导致中文用户每敲一个拼音字母就发一次请求；漏掉 compositionend 则可能永远不触发最终逻辑。
动态添加的输入框要不要重新绑定 input 事件
不用。只要事件委托到父容器（比如表单或编辑器根节点），就能捕获所有后代 <input> 和 <textarea> 的 input 事件：
form.addEventListener('input', e => {
if (e.target.matches('input, textarea')) {
console.log('值变了：', e.target.value);
}
});但要注意过滤掉 type="checkbox" 和 type="radio" —— 它们不触发 input 事件，匹配了也没用。另外，<select> 虽然支持 input，但实际中更常用 change，因为它的值变化只发生在用户选择后，而非实时。
最常被忽略的是初始化状态同步：比如编辑器加载时已有默认值，但没手动触发一次 input，后续逻辑可能误判为“未修改”。这时候需要在挂载后补一次 dispatchEvent(new Event('input', { bubbles: true }))，或者直接读取初始值做首次校验。
