onchange和addEventListener有什么不同?

How is onchange and addEventListener different?

本文关键字：什么 addEventListener onchange      更新时间：2023-09-26

我正在使用第三方滑块库(未知)，我需要它来更新文本值，每当滑块被拖到一个新的位置。当前运行的代码如下所示:

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>

两个警报都被触发，滑块和文本值都被成功呈现。但是，当我将onchange = function() {...};替换为addEventListener("change", function() {...});时，只触发第一个警报，并且呈现滑块而不呈现文本值。

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上。

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

浏览器兼容性也有差异，addEventListener不支持旧版本的IE <=IE8。

相关文章：