Javascript onchange和addEventListener有何不同？

我使用的是第三方滑块库（未知），每当滑块拖动到新位置时，我都需要它来更新文本值。有效的当前代码如下所示：

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>

我不明白为什么会这样。这种行为的可能原因是什么？如何使用

addEventListener

而不是

onchange

---

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

基本相同，但您只能将一个事件绑定到

onchange

属性，因为它替换现有事件，而

addEventListener

可以绑定多个更改事件或其他事件

---

还有一个浏览器兼容性差异，

addEventListener

不适用于调用

opacitySlider.onchange（）的旧IE版本这样不好（不会触发事件或任何事情）；定义一个函数，将其与
addEventListener
一起使用，然后单独调用它。另外，请展示一个真实的例子
。文本内容
在语法上甚至无效。@Ryan抱歉，自动更正，将对其进行编辑。这就是实际的例子。如果第二个警报没有显示，这意味着在尝试调用
.addEventListener（）
时发生了错误-浏览器控制台中是否显示了任何错误？第一个代码块的第一行应该是
不透明滑块=…
？如果该变量不是对DOM元素的引用，则不能对其调用
addEventListener（）
。@nnnnnn是的，它应该是
opacitySlider
，我正在电话上键入，所以可能有我没有捕捉到的自动更正。我不确定它是否是DOM元素。所以如果不是DOM，我就不能调用
addEventListener
？它是否与任何
onchange
或类似工具相同？您使用的是哪个滑块库？我没有兼容性问题。应用程序将只部署在一个配置上，而我的其他事件侦听器工作得很好。就是这个。
alert("setting onchange event");
opacitySlider.addEventListener("change", function()  {
  document.getElementById("opacityDisplay").textContent = opacitySlider.getValue() + "%";
});
alert("onchange event set");