HTML 表单实时计算：用 input 事件驱动

报价器、购物车这类表单，输入数字的同时总价跟着变。实现的关键不在计算逻辑，在事件选型与更新方式。

第一步：绑 input 事件

用 input 事件而不是 change。change 要等失焦才触发，输入过程中没有任何反馈，实时性靠 input 保证。

form.addEventListener('input', updateTotal);

绑在 form 上做事件委托，新增输入项不需要补绑定。

第二步：安全转数字

const n = parseFloat(input.value) || 0;

空串、非数字内容转换后是 NaN，直接进入求和会污染全部结果。短路或运算把非法值归零。

第三步：统一入口

function updateTotal() {
  let sum = 0;
  form.querySelectorAll('[data-price]').forEach(el => {
    sum += (parseFloat(el.value) || 0) * Number(el.dataset.price);
  });
  total.textContent = sum.toFixed(2);
}

所有联动计算收进同一个函数，任何字段变化都走这一个入口，逻辑只有一份。

两个细节

其一，高频输入场景加五十毫秒以内的防抖，连续击键合并成一次计算，手感不受影响。

其二，结果用 textContent 写回，不用 innerHTML。计算结果拼进 HTML 字符串既多余又引入注入面。

精度敏感场景把金额换算成整数分再求和，显示前再除回来，浮点误差从源头绕开。