I keep reading that there is no difference between the two but I am writing a quiz app and am seeing some differences

For example:

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();
    };
};

When using an event listener, I will log the guess to the console on the first button choice. When I choose an answer for the second question the console will read not only the new selection but also the choice I made from the previous question. This does not happen when using .onclick() and I am not sure why!

I keep reading that there is no difference between the two but I am writing a quiz app and am seeing some differences

For example:

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();
    };
};

When using an event listener, I will log the guess to the console on the first button choice. When I choose an answer for the second question the console will read not only the new selection but also the choice I made from the previous question. This does not happen when using .onclick() and I am not sure why!

• javascript

• 2 addEventListener allows you to bind more than one event handler to the same event, whereas .onclick will overwrite any existing one. So your code is doing something wrong. – Niet the Dark Absol Commented Jun 20, 2017 at 19:42
• That must be it then. When I run multiple events on the button when using .assEventListener it must be keeping all instances of "guess" that are passed through. – Collin DeSoto Commented Jun 20, 2017 at 19:47

1 Answer 1

Consider the following code:

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>

In case 1, clicking on el1 will alert with both messages. In case 2, clicking on el2 will only alert with the second because we overwrote what onclick does with the second assignment.

addEventListener effectively assigns a callback to some internal array of listener callbacks that will all be called whenever the event is triggered.

onclick is a single property with a single value. When you assign to it, the old value is replaced by the new assignment.

I would highly suggest that you do not use the onclick method. It makes code harder to maintain. If you are in a large code base and you set the onclick of an element and then later on another coder also sets the onclick without knowing that that element already had its onclick set, then you will run into a difficult time trying to figure out why your code is broken all of a sudden. Using the event listener pattern makes for more extensible and decoupled code.