javascript - .addEventListener 与 .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 设置，然后你会遇到困难，试图弄清楚为什么你的代码突然被破坏了。使用事件监听器模式可以实现更具可扩展性和解耦性的代码。