onchange 在元素失去焦点且值改变后触发，非实时响应；应使用 oninput 实现实时监听；addeventlistener("change", fn) 是最稳妥的绑定方式，支持多次绑定和移除。
onchange 触发时机不对，为什么输入时没反应？
onchange 不是“一敲就触发”，它只在元素失去焦点（blur）且值发生改变后才触发。这意味着：你在 <input type="text"> 里打字、删改，只要光标还停在里面，onchange 就不会执行。
- 想实时响应输入？该用
oninput（推荐）或onkeyup -
onchange更适合表单提交前校验、下拉框（<select></select>）选项切换、复选框（<input type="checkbox">）勾选完成后的逻辑 - 注意：Safari 对
onchange在某些contenteditable场景下行为不一致，别依赖它做富文本实时监听
绑定 onchange 的三种写法，哪一种最稳妥？
直接写 HTML 属性（onchange="handle()"）、DOM 属性赋值（el.onchange = fn）、事件监听器（addEventListener("change", fn)）都能用，但行为和兼容性不同。
- HTML 属性方式：函数必须全局可访问，且无法传参；容易污染全局命名空间
- DOM 属性赋值（
el.onchange = handle）：只能绑定一个处理函数，后赋值会覆盖前一个 -
addEventListener("change", fn)：支持多次绑定、可移除（removeEventListener）、this 指向更可控 —— 现代项目首选 - 注意：
addEventListener的事件名是"change"，不是"onchange"（后者是 HTML 属性名）
select 元素的 onchange 为什么有时不触发？
常见于动态修改 select.value 后没手动触发事件，或者选项通过 JS 插入但未设置 selected 属性。
- JS 修改
select.value不会自动触发change事件，需手动调用el.dispatchEvent(new Event("change")) - 如果用
innerHTML或insertAdjacentHTML添加<option></option>，记得同时设selected或后续调用select.value = "xxx"，否则用户点击可能无变化 - React/Vue 等框架中，直接操作 DOM 的
value和selectedIndex可能绕过框架响应式，导致视图与状态不一致
移动端 input[type="date"] 的 onchange 行为很怪？
Android Chrome 和 iOS Safari 对日期/时间输入框的 change 触发时机不统一：有的在 picker 关闭后触发，有的在选择年份时就触发一次，甚至点取消也触发。
立即学习“前端免费学习笔记（深入）”；
- 不要假设
change一定代表“用户确认了最终选择”；更可靠的做法是结合blur+ 值比对，或用input事件监听中间状态 - 部分旧版 Android WebView 完全不触发
change，建议 fallback 到按钮点击提交 - 如果需要强一致性，干脆禁用原生 picker（
type="text"+ 第三方日历库），自己控制事件流
