我一直读到这两者之间没有区别,但我正在编写一个测验应用程序并且发现了一些区别
例如:
Quiz.prototype.handleGuess = function (id, guess) {
let button = document.getElementById(id);
button.addEventListener('click', function(){
quiz.guess(guess);
console.log(guess);
}
if(!quiz.hasEnded){
quiz.displayNext();
} else {
quiz.displayScore();
};
};
使用事件监听器时,我会在选择第一个按钮时将猜测记录到控制台。当我为第二个问题选择答案时,控制台不仅会读取新选择,还会读取我在上一个问题中所做的选择。使用 .onclick() 时不会发生这种情况,我不确定为什么!
最佳答案
考虑以下代码:
var el1 = document.getElementById("someEl1"),
el2 = document.getElementById("someEl2");
function firstHandler() {
alert("First handler");
}
function secondHandler() {
alert("Second handler");
}
el1.addEventListener("click", firstHandler);
el1.addEventListener("click", secondHandler);
el2.onclick = firstHandler;
el2.onclick = secondHandler;
<div id="someEl1">First Element</div>
<div id="someEl2">Second Element</div>
在情况 1 中,单击 el1
将同时显示两条消息。在情况 2 中,单击 el2
只会在第二个赋值时发出警报,因为我们覆盖了 onclick
对第二个赋值的操作。
addEventListener
有效地将回调分配给一些内部监听器回调数组,只要事件被触发,这些回调将全部被调用。
onclick
是具有单个值的单个属性。当您分配给它时,旧值将被新分配替换。
我强烈建议您不要使用 onclick
方法。它使代码更难维护。如果您在一个大型代码库中并且您设置了一个元素的 onclick
,然后另一个编码器也设置了 onclick
而不知道该元素已经有它的 onclick
设置,然后你会遇到困难,试图弄清楚为什么你的代码突然被破坏了。使用事件监听器模式可以实现更具可扩展性和解耦性的代码。
关于javascript - .addEventListener 与 .onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44661707/