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></select>的onchange只在用户点击切换选项后 blur 时触发；如果 JS 动态设select.value，必须手动el.dispatchEvent(new Event('change'))
addEventListener("change", fn) 是唯一靠谱的绑定方式
别用 onchange="handle()" 或 el.onchange = fn，它们有硬伤：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- HTML 内联写法要求
handle()必须是全局函数，容易命名冲突，也无法传参 -
el.onchange = fn是属性赋值，后一次会直接覆盖前一次，没法叠加多个逻辑 -
addEventListener("change", fn)支持多次绑定、可移除、this指向稳定，且事件名是"change"（注意：不是"onchange"） - 务必等 DOM 加载完成再绑定，否则
getElementById可能返回null—— 推荐用document.addEventListener('DOMContentLoaded', ...)
select 元素的 onchange 为什么经常失效
常见于动态渲染或 JS 控制场景：
- 把
onchange写在<option></option>上完全无效，必须绑定在<select></select>根元素上 - 用
innerHTML插入<option></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"+ 第三方日历库），自己控制事件流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
