为input元素绑定change事件无效：为何控制台未打印预期内容？

问题原因 #

readonly 属性的输入框存在两个核心问题导致你的change事件无法触发：

1. 浏览器原生change事件仅在用户手动交互修改输入内容时触发，通过JavaScript代码直接修改value属于程序式变更，不会自动触发该事件。
2. 带有readonly属性的输入框本身禁止用户手动编辑，因此这个输入框根本不会产生用户触发的change事件。

解决方案 #

你可以选择以下两种方式实现需求：

方式一：手动触发change事件 #

在通过JS修改tot${m}输入框的value后，手动调用dispatchEvent触发change事件，让绑定的监听器执行：

var merende = {
  "ciaccia": {
    "prezzo": 0.8,
    "stock": 11
  },
  "frusta": {
    "prezzo": 1.3,
    "stock": 11
  },
  "pizza": {
    "prezzo": 1.1,
    "stock": 11
  },
  "fagotto": {
    "prezzo": 1.5,
    "stock": 11
  }
}
for (const m in merende) {
  document.getElementById(`qta${m}`).addEventListener("change", (e) => {
    var tot = (e.target.value * merende[m].prezzo).toFixed(1);
    const totInput = document.getElementById(`tot${m}`);
    totInput.value = `${tot}€`;
    // 手动触发change事件
    totInput.dispatchEvent(new Event('change'));
    parseFloat(totInput.value.split("€")[0]);
  });

  document.getElementById(`tot${m}`).addEventListener("change", (e) => {
    console.log("a");
  })
}

方式二：直接执行目标逻辑 #

既然tot${m}的内容只能通过JS代码修改，完全可以跳过change事件监听，直接在修改value的代码块里执行你需要的逻辑，这样更高效：

var merende = {
  "ciaccia": {
    "prezzo": 0.8,
    "stock": 11
  },
  "frusta": {
    "prezzo": 1.3,
    "stock": 11
  },
  "pizza": {
    "prezzo": 1.1,
    "stock": 11
  },
  "fagotto": {
    "prezzo": 1.5,
    "stock": 11
  }
}
for (const m in merende) {
  document.getElementById(`qta${m}`).addEventListener("change", (e) => {
    var tot = (e.target.value * merende[m].prezzo).toFixed(1);
    const totInput = document.getElementById(`tot${m}`);
    totInput.value = `${tot}€`;
    parseFloat(totInput.value.split("€")[0]);
    // 直接执行原本要在change事件里做的逻辑
    console.log("a");
  });
}

内容的提问来源于stack exchange，提问作者Francesco Pauselli