使用addEventListener获取附加到节点的事件侦听器

Question

我已经看过这些问题了：

• How to find event listeners on a DOM node when debugging or from the JavaScript code?
• can I programmatically examine and modify Javascript event handlers on html elements?
• How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

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

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

Answer 1

Chrome DevTools，Safari Inspector和Firebug支持 getEventListeners(node) 。

Answer 2

你不能。

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

DOM4 addEventListener

说

  

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

意味着将事件侦听器添加到＆＃34;事件侦听器列表中＃34;。这就是全部。没有关于此列表应该是什么以及如何访问它的概念。

Answer 3

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

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

Answer 4

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

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

另外，我编写自己的插件，通过更好的格式化来实现这一点。

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

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

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

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

Answer 5

我找不到使用代码执行此操作的方法，但是在Firefox 64库存中，事件显示在开发人员工具检查器中每个HTML实体的旁边，如MDN Examine Event Listeners页上所述，并在此演示图片：