javascript - onchange 和 addEventListener 有何不同？

Question

我正在使用第三方 slider 库(未知)，并且每当 slider 拖动到新位置时，我都需要它来更新文本值。当前有效的代码如下所示:

opacitySlider = new Slider(document.getElementById("opacitySlider"), document.getElementById("opacity"));
opacitySlider.setMinimum(0);
opacitySlider.setMaximum(100);
opacitySlider.setUnitIncrement(2);
alert("setting onchange event");
opacitySlider.onchange = function()  {
  document.getElementById("opacityDisplay").textContent = opacitySlider.getValue() + "%";
};
alert("onchange event set");
opacitySlider.onchange();

<div style="display: table">
  <div style="display: table-cell; width: 15%">
    <span id=" opacityDisplay"></span>
  </div>
  <div style="display: table-cell">
    <div id="opacitySlider" class="slider">
      <input class="slider-input">
    </div>
  </div>
</div>

两个警报均已触发， slider 和文本值均已成功呈现。但是，当我将 onchange = function() {...}; 替换为 addEventListener("change", function() {...}); 时，仅第一个警报被触发， slider 被渲染，但文本值不被渲染。

alert("setting onchange event");
opacitySlider.addEventListener("change", function()  {
  document.getElementById("opacityDisplay").textContent = opacitySlider.getValue() + "%";
});
alert("onchange event set");

我不明白为什么会发生这种情况。这种行为的可能原因是什么？如何使用 addEventListener 而不是 onchange？

最好使用事件监听器来保持与我的应用程序的其余部分的一致性，该应用程序也使用事件监听器。这是我唯一遇到问题的事件监听器。此应用程序将部署在 Internet Explorer 11.212.10586.0 上。

Answer 1

本质上它们是相同的，但您只能将一个事件绑定(bind)到 onchange 属性，因为它会替换现有事件，而 addEventListener 可以绑定(bind)多个更改事件，或者其他事件。

也存在浏览器兼容性差异，addEventListener 不适用于旧版 IE <=IE8 我相信。