You can not remove the listener if you add new listener. All listeners will be added in the queue. You can see it for example here:
var listenerLoad = function(e){console.log(1)};
window.addEventListener('load', listenerLoad, false);
window.addEventListener('load', listenerLoad, true);
window.addEventListener('load', function(e){console.log(3)}, false);
window.onload = function(e){console.log(4)};
But you can remove the listener if you use the appropriate function for this. You have to use the function EventTarget.removeEventListener(). Read this documentation carefully before. The parameters have to be the same like in addEventListener() by initialization from this events. And the pointers to the listerners should be the same like in addEventListener(). For example if you they have the pointers to the listerners like:
var listenerTouchStart = function(e){/**/},
listenerTouchEnd = function(e){/**/},
listenerTouchCancel = function(e){/**/},
listenerTouchMove = function(e){/**/};
then you can delete the listeners like follows:
document.removeEventListener('touchstart', listenerTouchStart, false);
document.removeEventListener('touchend', listenerTouchEnd, false);
document.removeEventListener('touchcancel', listenerTouchCancel, false);
window.removeEventListener('touchmove', listenerTouchMove, false);
But do not forget that window.removeEventListener('touchmove', listenerTouchMove, false); and window.removeEventListener('touchmove', listenerTouchMove, true); are not the same. If they add the listener with false and you try to remove it with true then it will not work. Be careful!
If you want to find the listener function names then you have 3 ways:
- You can search manually in the code.
- In the developer console in Chrome DevTools(Opera inclusive), Safari Inspector and in Firebug you can type in console
getEventListeners(Object);. For example for our window in the first example you will have an output like this:
And if the listener was added with anonymous function then it does not have a name.
- You can use ListenerTracker script. Here is the source code of it (do not try to execute this snippet – it is only to hide this long code):
// THIS SNIPPET SHOULD NOTHING DO.
// IT IS ONLY TO HIDE THIS LONG CODE
function DO_NOT_COPY_THIS_LINE() //<-DO NOT COPY THIS LINE
{
//////////////////////////////
//ListenerTracker Script START
//////////////////////////////
var ListenerTracker = new function()
{
var is_active=false;
// listener tracking datas
var _elements_ =[];
var _listeners_ =[];
this.init=function(){
if(!is_active){//avoid duplicate call
intercep_events_listeners();
}
is_active=true;
};
// register individual element an returns its corresponding listeners
var register_element = function(element){
if(_elements_.indexOf(element)==-1){
// NB : split by useCapture to make listener easier to find when removing
var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
_elements_.push(element);
_listeners_.push(elt_listeners);
}
return _listeners_[_elements_.indexOf(element)];
};
var intercep_events_listeners = function(){
// backup overrided methods
var _super_={
"addEventListener" : HTMLElement.prototype.addEventListener,
"removeEventListener" : HTMLElement.prototype.removeEventListener
};
Element.prototype["addEventListener"] = function(type, listener, useCapture){
var listeners=register_element(this);
// add event before to avoid registering if an error is thrown
_super_["addEventListener"].apply(this,arguments);
// adapt to 'elt_listeners' index
useCapture=useCapture?1:0;
if(!listeners[useCapture][type])listeners[useCapture][type]=[];
listeners[useCapture][type].push(listener);
};
Element.prototype["removeEventListener"] = function(type, listener, useCapture){
var listeners=register_element(this);
// add event before to avoid registering if an error is thrown
_super_["removeEventListener"].apply(this,arguments);
// adapt to 'elt_listeners' index
useCapture=useCapture?1:0;
if(!listeners[useCapture][type])return;
var lid = listeners[useCapture][type].indexOf(listener);
if(lid>-1)listeners[useCapture][type].splice(lid,1);
};
Element.prototype["getEventListeners"] = function(type){
var listeners=register_element(this);
// convert to listener datas list
var result=[];
for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
if(typeof(type)=="string"){// filtered by type
if(list[type]){
for(var id in list[type]){
result.push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
}
}
}else{// all
for(var _type in list){
for(var id in list[_type]){
result.push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
}
}
}
}
return result;
};
};
}();
ListenerTracker.init();
//////////////////////////////
//ListenerTracker Script END
//////////////////////////////
}
I have found this ListenerTracker script here. With this script you will get even anonymous listeners, but you have to add it before they add some listeners in the code.
Good luck!
