.addEventListener vs .onclick

Question

我一直在读两者之间没有区别，但我正在编写一个测验应用程序，并且看到了一些差异

例如：

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() 时不会发生这种情况，我不确定为什么！

Answer 1

请考虑以下代码：

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，那么你将遇到一个困难的时间来试图弄清楚为什么你的代码突然被破坏了。 使用事件侦听器模式可以使代码更具可扩展性和解耦。