Remove All Event Listeners of Specific Type

javascript events
J S picture J S · Oct 19, 2013 · Viewed 170.8k times · Source

I want to remove all event listeners of a specific type that were added using addEventListener(). All the resources I'm seeing are saying you need to do this:

elem.addEventListener('mousedown',specific_function);
elem.removeEventListener('mousedown',specific_function);

But I want to be able to clear it without knowing what it is currently, like this:

elem.addEventListener('mousedown',specific_function);
elem.removeEventListener('mousedown');

Answer

plalx picture plalx · Oct 19, 2013

That is not possible without intercepting addEventListener calls and keep track of the listeners or use a library that allows such features unfortunately. It would have been if the listeners collection was accessible but the feature wasn't implemented.

The closest thing you can do is to remove all listeners by cloning the element, which will not clone the listeners collection.

Note: This will also remove listeners on element's children.

var el = document.getElementById('el-id'),
    elClone = el.cloneNode(true);

el.parentNode.replaceChild(elClone, el);

Related questions

Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
How to trigger event in JavaScript?

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. How can I do it?

Read More