如果添加新侦听器,则无法删除侦听器。所有侦听器都将添加到队列中。例如,您可以在这里看到它:
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)};
但是,如果您为此使用适当的功能,则可以删除侦听器。您必须使用该功能EventTarget.removeEventListener()
。之前请仔细阅读本文档。参数必须与addEventListener()
此事件中的初始化相同。并且指向监听器的指针应该和 in 中的一样addEventListener()
。例如,如果您 有指向侦听器的指针,例如:
var listenerTouchStart = function(e){/**/},
listenerTouchEnd = function(e){/**/},
listenerTouchCancel = function(e){/**/},
listenerTouchMove = function(e){/**/};
然后您可以删除侦听器,如下所示:
document.removeEventListener('touchstart', listenerTouchStart, false);
document.removeEventListener('touchend', listenerTouchEnd, false);
document.removeEventListener('touchcancel', listenerTouchCancel, false);
window.removeEventListener('touchmove', listenerTouchMove, false);
但不要忘记,window.removeEventListener('touchmove', listenerTouchMove, false);
和window.removeEventListener('touchmove', listenerTouchMove, true);
不一样。如果他们添加了侦听false
器并且您尝试将其删除,true
那么它将无法正常工作。当心!
如果要查找侦听器函数名称,则有 3 种方法:
- 您可以在代码中手动搜索。
- 在Chrome DevTools(包括 Opera)、Safari Inspector 和 Firebug的开发者控制台
getEventListeners(Object);
中,您可以输入 console 。例如,对于第一个示例中的窗口,您将获得如下输出:
如果监听器是用匿名函数添加的,那么它就没有名字。
- 您可以使用 ListenerTracker 脚本。这是它的源代码(不要试图执行这个片段——它只是为了隐藏这个长代码):
// 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
//////////////////////////////
}
我在这里找到了这个 ListenerTracker 脚本。使用此脚本,您甚至可以获得匿名侦听器,但您必须在他们在代码中添加一些侦听器之前添加它。
祝你好运!