I recently ran into a problem involving the removeEventListener()
method, which caused me a good half an hour of confusion before a lightbulb appeared above my head and I was enlightened by a solution – a solution which, it must be said, is very obvious in hindsight. So doubtless many people know this already, but I’m recording it here along with another approach I thought of afterwards, in the hope that they may be useful to someone in the future.
The issue at hand is this: to add an event listener to an element, you use the addEventListener()
method with the type of event, and the name of the listener – most often, a call to a pre-defined function:
el.addEventListener('click', foo);
When you want to remove the listener, you use the removeEventListener()
method, with the same arguments to ensure that only the specified event and listener combination is removed:
el.removeEventListener('click', foo);
Simple. But it becomes less straightforward when you use an anonymous function as the listener, perhaps because you want to call another function and pass arguments to it:
el.addEventListener('click', function() { foo(bar,baz); });
In order to remove this listener you have to know the name of it. But it’s anonymous! What are we to do? The answer is ridiculously simple: don’t use anonymous functions. You could instead name the function in the listener, then remove it when the function has run:
el.addEventListener('click', function _func() { foo(bar,baz); el.removeEventListener('click', _func); });
Alternatively, you could assign the function to a variable, then use that variable as the listener:
var _func = function() { foo(bar,baz); } el.addEventListener('click', _func);
And remove it by using the variable name again:
el.removeEventListener('click', _func);
These solutions seem so obvious that I debated whether it was worth recording them here, but in my searches I couldn’t find them listed anywhere; I hope that by writing them up I’ll save someone some searching time in the future.
The final suggestion of assigning the function to a variable won’t work in all cases. Mainly because “_func.name == undefined”.
Trevor Norris [May 22nd, 2013, 22:23]
[…] Removing anonymous event listeners (Broken Links) […]
Geek Reading May 23, 2013 | Regular Geek [May 23rd, 2013, 18:01]
“These solutions seem so obvious that I debated whether it was worth recording them here”….
:)
FYI: I actually came here thinking you had (magically) found a way to do the impossible….
talmai [May 23rd, 2013, 18:30]