Delete all listeners of a certain type

Question

I want to remove all event listeners of a certain type that were added using addEventListener() . All the resources that I see say you need to do this:

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

But I want to be able to clean it, not knowing what it is:

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

Answer 1

This is not possible without intercepting addEventListener calls and tracking listeners or using a library that unfortunately allows such functions. This would be if the collection of listeners was available, but the function was not implemented .

The closest thing you can do is remove all listeners by cloning an element that will not clone the listeners collection.

Note. This will also remove the child listeners.

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

Answer 2

If your only goal is to remove the listeners, it is to stop their launch, you can add an event listener to the window, capturing and canceling all events of this type:

 window.addEventListener(type, function (event) { event.stopPropagation(); }, true); 

Passing true for the third parameter captures the event on the way down. Stopping propagation means that the event never reaches the listeners who listen to it.

Answer 3

I know this is old, but I had a similar problem with no real answers, where I wanted to remove all "keydown" event listeners from the document. Instead of deleting them, I redefined addEventListener to ignore them before they were added, similar to how Toms answered above, adding this before loading any other scripts .:

 <script type="text/javascript"> var current = document.addEventListener; document.addEventListener = function (type, listener) { if(type =="keydown") { //do nothing } else { var args = []; args[0] = type; args[1] = listener; current.apply(this, args); } }; </script> 

Answer 4

You must override EventTarget.prototype.addEventListener to create a hook function to register all calls to the 'add listener'. Something like that:

 var _listeners = []; EventTarget.prototype.addEventListenerBase = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener = function(type, listener) { _listeners.push({target: this, type: type, listener: listener}); this.addEventListenerBase(type, listener); }; 

Then you can create EventTarget.prototype.removeEventListener s :

 EventTarget.prototype.removeEventListeners = function(targetType) { for(var index = 0; index != _listeners.length; index++) { var item = _listeners[index]; var target = item.target; var type = item.type; var listener = item.listener; if(target == this && type == targetType) { this.removeEventListener(type, listener); } } } 

In ES6, you can use Symbol to hide the original function and the list of all added listeners directly in the self-using object.

 (function() { let target = EventTarget.prototype; let functionName = 'addEventListener'; let func = target[functionName]; let symbolHidden = Symbol('hidden'); function hidden(instance) { if(instance[symbolHidden] === undefined) { let area = {}; instance[symbolHidden] = area; return area; } return instance[symbolHidden]; } function listenersFrom(instance) { let area = hidden(instance); if(!area.listeners) { area.listeners = []; } return area.listeners; } target[functionName] = function(type, listener) { let listeners = listenersFrom(this); listeners.push({ type, listener }); func.apply(this, [type, listener]); }; target['removeEventListeners'] = function(targetType) { let self = this; let listeners = listenersFrom(this); let removed = []; listeners.forEach(item => { let type = item.type; let listener = item.listener; if(type == targetType) { self.removeEventListener(type, listener); } }); }; })(); 

You can test this code with this little scissor:

 document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); }); document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); }); document.addEventListener("click", event => { console.log('click event'); }); document.dispatchEvent(new Event('DOMContentLoaded')); document.removeEventListeners('DOMContentLoaded'); document.dispatchEvent(new Event('DOMContentLoaded')); // click event still works, just do a click in the browser 

Answer 5

You can also overwrite the 'yourElement.addEventListener ()' method and use the .apply () method to execute the listener as normal, but intercepting the function in the process. How:

 <script type="text/javascript"> var args = []; var orginalAddEvent = yourElement.addEventListener; yourElement.addEventListener = function() { //console.log(arguments); args[args.length] = arguments[0]; args[args.length] = arguments[1]; orginalAddEvent.apply(this, arguments); }; function removeListeners() { for(var n=0;n<args.length;n+=2) { yourElement.removeEventListener(args[n], args[n+1]); } } removeListeners(); </script> 

This script should run when the page loads, or not intercept all event listeners.

Before use, be sure to remove the removeListeners () call.

Answer 6

In the extreme case, when you don’t know which callback is connected to the window listener, the handler can be a wrapper around the addEventListener window and the variable can ever store listeners to remove each of them correctly using removeAllEventListener('scroll') .

 var listeners = {}; var originalEventListener = window.addEventListener; window.addEventListener = function(type, fn, options) { if (!listeners[type]) listeners[type] = []; listeners[type].push(fn); return originalEventListener(type, fn, options); } var removeAllEventListener = function(type) { if (!listeners[type] || !listeners[type].length) return; for (let i = 0; i < listeners[type].length; i++) window.removeEventListener(type, listeners[type][i]); } 

Answer 7

Delete all listeners in the element one line at a js :

 element.parentNode.innerHTML += '';