使用addEventListener将事件侦听器附加到节点

I have already looked at these questions:

我已经看过这些问题：

• How to find event listeners on a DOM node when debugging or from the JavaScript code?
• 如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？
• can I programmatically examine and modify Javascript event handlers on html elements?
• 我可以在html元素上以编程方式检查和修改Javascript事件处理程序吗？
• How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
• 如何使用Firebug（或类似工具）调试JavaScript / jQuery事件绑定

however none of them answers how to get a list of event listeners attached to a node using addEventListener, without modifying the addEventListener prototype before the event listeners are created.

但是，他们都没有回答如何使用addEventListener获取附加到节点的事件侦听器列表，而无需在创建事件侦听器之前修改addEventListener原型。

VisualEvent doesn't display all event listener (iphone specific ones) and I want to do this (somewhat) programmatically.

VisualEvent不显示所有事件监听器（特定于iphone的），我想以编程方式（稍微）执行此操作。

4 个解决方案

#1

Chrome DevTools, Safari Inspector and Firebug support getEventListeners(node).

Chrome DevTools，Safari Inspector和Firebug支持getEventListeners（节点）。

#2

You can't.

你不能。

The only way to get a list of all event listeners attached to a node is to intercept the listener attachment call.

获取附加到节点的所有事件侦听器列表的唯一方法是拦截侦听器附件调用。

DOM4 addEventListener

DOM4 addEventListener

Says

说

Append an event listener to the associated list of event listeners with type set to type, listener set to listener, and capture set to capture, unless there already is an event listener in that list with the same type, listener, and capture.

将事件侦听器附加到关联的事件侦听器列表，其类型设置为type，侦听器设置为侦听器，捕获设置为捕获，除非该列表中已存在具有相同类型，侦听器和捕获的事件侦听器。

Meaning that an event listener is added to the "list of event listeners". That's all. There is no notion of what this list should be nor how you should access it.

意味着将事件侦听器添加到“事件侦听器列表”中。就这样。没有关于此列表应该是什么以及您应该如何访问它的概念。

#3

Since there is no native way to do this ,Here is less intrusive solution i found (dont add any 'old' prototype methods):

由于没有本地方法可以做到这一点，我发现这是一个不那么具有侵入性的解决方案（不要添加任何'旧'原型方法）：

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();

#4

You can obtain all jQuery events using $._data($('[selector]')[0],'events'); change [selector] to what you need.

您可以使用$ ._ data（$（'[selector]'）[0]，'events'）获取所有jQuery事件;将[selector]更改为您需要的。

There is a plugin that gather all events attached by jQuery called eventsReport.

有一个插件可以收集jQuery附带的所有事件，名为eventsReport。

Also i write my own plugin that do this with better formatting.

此外，我编写自己的插件，以更好的格式化这样做。

But anyway it seems we can't gather events added by addEventListener method. May be we can wrap addEventListener call to store events added after our wrap call.

但无论如何，似乎我们无法收集addEventListener方法添加的事件。可能是我们可以将addEventListener调用包装到我们的wrap调用后添加的存储事件。

It seems the best way to see events added to an element with dev tools.

这似乎是使用开发工具查看添加到元素的事件的最佳方式。

But you will not see delegated events there. So there we need jQuery eventsReport.

但你不会在那里看到委派的事件。所以我们需要jQuery eventsReport。

UPDATE: NOW We CAN see events added by addEventListener method SEE RIGHT ANSWER TO THIS QUESTION.

更新：现在我们可以看到addEventListener方法添加的事件了解这个问题的正确答案。