结论：oninput是实时响应输入的正确选择，onchange只在失焦后触发，不适合实时计算；oninput在每次输入、删除、粘贴、输入法选词时均触发，覆盖绝大多数编辑场景，而onchange需失去焦点才触发且无法响应脚本修改或自动填充。
oninput 事件和 onchange 事件到底该选哪个？
直接说结论：oninput 是实时响应输入的正确选择，onchange 只在失焦后触发，不适合实时计算。
常见错误是用 onchange 绑定计算逻辑，结果用户还在打字，页面毫无反应，输完回车或点别处才更新——这根本不算“实时”。oninput 在每次输入、删除、粘贴、甚至用输入法选词时都会触发（Chrome/Firefox/Edge 均支持），覆盖绝大多数编辑场景。
注意：Safari 对部分输入法（如中文拼音）的早期版本有延迟触发问题，但 iOS 16+ 和 macOS Ventura+ 已基本修复；若需兼容极老 Safari，可加 input.addEventListener('input', ...) 并 fallback 到 keyup（仅作兜底，不推荐默认启用）。
怎么写一个带防抖的 oninput 实时计算？
无节制触发 oninput 容易拖慢页面，尤其涉及 DOM 更新或复杂运算时。直接内联函数（如 oninput="calc()"）会每次重编译，且无法防抖。
立即学习“前端免费学习笔记（深入）”；
推荐做法是绑定外部函数，并用简单防抖控制频率：
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
<p>const calcTotal = debounce(() => {
const a = parseFloat(document.getElementById('price').value) || 0;
const b = parseFloat(document.getElementById('qty').value) || 0;
document.getElementById('total').textContent = (a * b).toFixed(2);
}, 150);</p><p>document.getElementById('price').addEventListener('input', calcTotal);
document.getElementById('qty').addEventListener('input', calcTotal);关键点：
- 不要在 HTML 里写
oninput="setTimeout(calc, 100)"—— 闭包和 this 指向会出错，且无法清除前次定时器 - 防抖时间设为 100–200ms 较合理：短于 100ms 用户感知不到延迟，长于 300ms 会感觉卡顿
- 对空值或非数字输入，用
|| 0或isNaN()处理，避免NaN传播到后续计算
为什么 input[type="number"] 的 oninput 有时不触发？
这是个高频坑：input[type="number"] 在用户输入非法值（比如字母、多个小数点）时，input.value 为空字符串，但 oninput 仍会触发——只是你读到的是空值，误以为没触发。
实际调试时，加一句 console.log(e.target.value, e.target.validity.valid) 就能看清问题。解决方案：
- 优先用
input[type="text"]+ 正则限制（更可控），例如：<input type="text" pattern="^\d*\.?\d*$"> - 若坚持用
type="number"，检查e.target.validity.valid再计算，否则跳过 - 移动端 iOS Safari 对
type="number"的oninput支持不稳定，建议统一用type="text"并配合inputmode="decimal"
实时计算中如何避免重复绑定或内存泄漏？
动态插入表单、SPA 路由切换、或反复初始化时，容易多次绑定同一个 oninput 监听器，导致一次输入触发多次计算。
安全做法：
- 绑定前先移除旧监听：
el.removeEventListener('input', handler) - 用
data-listener-bound="true"标记已绑定的元素，避免重复执行 - 不在内联 HTML 中写
oninput，尤其是模板渲染循环里（如 Vue/React 的 map 渲染），否则每次 re-render 都新建函数实例 - 如果用框架，优先交由框架的响应式机制处理（如 Vue 的
v-model+ 计算属性），而非手动绑oninput
最常被忽略的是：监听器函数若引用了外部大对象（比如整个表单数据 state），又没清理，就可能阻止垃圾回收——哪怕只绑一次，也得留意闭包捕获范围。
