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!
Share Improve this question edited Oct 22, 2019 at 5:56 Marius Mucenicu 1,7932 gold badges17 silver badges26 bronze badges asked Jun 20, 2017 at 19:40 Collin DeSotoCollin DeSoto 1411 silver badge11 bronze badges 2-
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
Reset to default 7Consider 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.