使用addEventListener将事件侦听器附加到节点
我已经看了这些问题：
- 如何在debugging时或从JavaScript代码中findDOM节点上的事件侦听器？
- 可以以编程方式检查和修改html元素上的Javascript事件处理程序吗？
- 如何使用Firebug（或类似工具）debuggingJavaScript / jQuery事件绑定
然而他们没有一个回答如何在创build事件侦听器之前使用addEventListener获取附加到节点的事件侦听器列表，而无需修改addEventListener原型。
VisualEvent不显示所有的事件监听器（特定于iPhone的），我想以编程方式做（有点）。
Chrome DevTools，Safari Inspector和Firebug支持getEventListeners（节点） 。
你不能。
获取连接到节点的所有事件侦听器的列表的唯一方法是拦截侦听器附件调用。
DOM4 addEventListener
说
将事件侦听器追加到types设置为type的事件侦听器的关联列表中，将侦听器设置为侦听器，并捕获设置为捕获的事件侦听器，除非该列表中已经存在具有相同types，侦听器和捕获的事件侦听器。
意味着一个事件监听器被添加到“事件监听器列表”中。 就这样。 这个列表应该是什么也没有概念，也不应该如何访问它。
由于没有原生的方法来做到这一点，这里是我发现的不太侵入性的解决scheme（不添加任何“旧”的原型方法）：
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();
你可以使用$ ._ data（$（'[selector]'）[0]，'events'）获得所有的jQuery事件。 将[select器]更改为您所需要的。
有一个插件可以收集jQuery所附带的eventsReport的所有事件。
另外我写我自己的插件，这样做更好的格式。
但无论如何，似乎我们无法收集由addEventListener方法添加的事件。 可能是我们可以包装addEventListener调用来存储我们的换行调用后添加的事件。
使用开发工具查看添加到元素的事件似乎是最好的方法。
但是你不会在那里看到委派的事件。 所以我们需要jQuery eventsReport。
更新：现在我们可以看到通过addEventListener方法添加事件看到这个问题的正确答案。
