onchange和addEventListener有什么不同?
How is onchange and addEventListener different?
我正在使用第三方滑块库(未知),我需要它来更新文本值,每当滑块被拖到一个新的位置。当前运行的代码如下所示:
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。
相关文章:
- 这是什么 ==- javascript 运算符
- 我的单元测试选项是什么
- 全局变量和全局对象的属性之间有什么区别吗
- 打破承诺链的好方法是什么
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Javascript中的空白是什么
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 在ember/handlers中使用value和valueBinding有什么区别
- 什么'在webpack外部设置中,reactDom和reactDom不同
- 在JavaScript中拆分日期字符串的更好方法是什么
- 为什么$.brower被弃用?还有什么更好的替代方案
- 什么是&&在没有if的行中的变量之间
- 将jQuery.ech()方法转换为本地JavaScript抽象的最佳方法是什么
- 处理浮点错误的最佳方法是什么
- DOM元素和angular元素之间的主要区别是什么
- javascript导入的最佳实践是什么
- 这两个关于 JavaScript 作用域链的例子有什么区别?
- 什么's本地node.js服务器和python简单http服务器之间的区别
- 基于窗口宽度jquery的函数的替代方法是什么
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效