In what cases/scenarios should removeEventListener be used?
When would it be needed or necessary?
The event listener can be removed when no interaction from a person is involved.
Have I never needed to use this before?
Is it something that is used a lot?
Event listeners are used to respond to events, which for the most part occur when a person interacts with the web page.
With the curtain players, if it’s being opened once, and not again, it wouldn’t be used for that, right?
By all the evidence that’s available, the curtains require an event listener.
That means I wouldn’t be removing it.
Events are the fundamental mechanism by which JavaScript does anything that occurs after the initial page load.
1 Like
As a bit of further background, events started as inline HTML attributes:
<div onclick="doSomething()"></div>
The trouble with that is that the function had no idea about from where the event was being triggered, so you would have to throw in an event parameter.
Other problems are that the HTML code ends up getting covered in JavaScript code. Companies were having trouble because scripting updates resulted in the HTML code needing to be updated too.
Eventually a separation of concerns occurred, with HTML being restricted to the HTML pages, CSS being restricted to the CSS pages, and JS being restricted to the JS pages.
This is where the traditional event methods became popular to use.
function doSomething(evt) {
...
}
button.onclick = doSomething;
They worked well for a while, but had trouble in that only one of each type of event was allowed. It wasn’t possible to have multiple click events on the same element.
button.onclick = doSomething; // doesn't work, is overwritten by the doSomething function
button.onclick = doSomethingElse;
Instead you would need to have a separate event handler that controlled the different things to occur.
button.onclick = function buttonClickHandler(evt) {
doSomething(evt);
doSomethingElse(evt);
};
That worked for a while but became annoying to manage. It was especially annoying when different sets of code wanted to do something with the same element.
That brings us to addEventListener which is the modern way of dealing with things, as it solves all of those earlier problems.
With addEventListener you can easily have multiple sets of the same event being listened for at the same time.
button.addEventListener("click", doSomething);
button.addEventListener("click", doSomethingElse);
If you want to delve deeper into the history of events and all of the troubles and solutions with them, excellent details have been provided by ppk at their quirksmode website.
3 Likes
They are great when developing a quiz game as I find they come in handy.
/* Disable Listeners, so users can't click on answer buttons */
const disableListeners = () => {
const myButtons = d.querySelectorAll('.answerButton');
myButtons.forEach(answer => {
answer.removeEventListener('click', clickHandler, false);
});
};
That way a player can’t click on the right answer to get the points.
This thread was in part a response to my suggestion from a question in the css forum.
I suggested it may be a good idea to remove the event listener if you only use it once but wasn’t sure if this was good advice?
1 Like
There might be a small benefit in doing that when thousands of event handlers are no longer being used. With just the one though - it’s a no-brainer to leave things as they are. The additional complexity of manually performing garbage collection doesn’t provide anything near to a beneficial outcome.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.