onchange只在元素失去焦点且值发生改变时触发；它非实时响应，需用oninput实现实时监听，addEventListener("change", fn)是最稳妥的绑定方式。

onchange 不是“一敲就触发”的事件，它只在元素**失去焦点（blur）且值确实发生了变化**时才执行。想实时响应输入？该用 oninput；想确认用户已完成选择？onchange 才是合适的时机。

onchange 触发条件到底是什么

它不是监听“内容变没变”，而是监听“焦点离开 + 值比对后有差异”：

• 用户在 <input type="text"> 里输入、删改，只要光标没移走，onchange 就不会触发
• 回车键在部分浏览器（Chrome/Firefox）中会模拟 blur 并触发 onchange，但 iOS Safari 通常不认这个逻辑
• 通过 JS 直接赋值 el.value = "new" 不会自动触发 onchange —— 这是 DOM 操作，不是用户交互
• <select> 的 onchange 只在用户点击切换选项后 blur 时触发；如果 JS 动态设 select.value，必须手动 el.dispatchEvent(new Event('change'))

addEventListener("change", fn) 是唯一靠谱的绑定方式

别用 onchange="handle()" 或 el.onchange = fn，它们有硬伤：

• HTML 内联写法要求 handle() 必须是全局函数，容易命名冲突，也无法传参
• el.onchange = fn 是属性赋值，后一次会直接覆盖前一次，没法叠加多个逻辑
• addEventListener("change", fn) 支持多次绑定、可移除、this 指向稳定，且事件名是 "change"（注意：不是 "onchange"）
• 务必等 DOM 加载完成再绑定，否则 getElementById 可能返回 null —— 推荐用 document.addEventListener('DOMContentLoaded', ...)

select 元素的 onchange 为什么经常失效

常见于动态渲染或 JS 控制场景：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 把 onchange 写在 <option> 上完全无效，必须绑定在 <select> 根元素上
• 用 innerHTML 插入 <option> 后，没设 selected 属性，或没同步更新 select.value，会导致用户点选无反应
• React/Vue 中直接操作 DOM 的 value 或 selectedIndex，会绕过框架响应式系统，视图与状态脱节
• 获取选中值时别依赖 this.value（有时不准），优先用 e.target.value 或 e.target.selectedOptions[0].value

移动端 date/time 输入框的 onchange 行为不可靠

Android Chrome 和 iOS Safari 对 <input type="date"> 的 onchange 触发时机不一致：

立即学习“前端免费学习笔记（深入）”；

• 有的在 picker 关闭后触发，有的在滚动年份时就触发一次，甚至点“取消”也触发
• 旧版 Android WebView 可能根本不触发 onchange
• 不要把它当作“用户已确认选择”的信号；更稳妥的做法是结合 blur + 手动比对前后值，或改用 oninput 监听中间状态
• 强一致性需求下，建议禁用原生 picker（type="text" + 第三方日历库），自己控制事件流

真正难的不是绑事件，而是判断「用户意图是否完成」——这个边界在不同控件、不同平台、不同交互路径下，从来都不统一。