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

Question

我已经看过这些问题:

• 如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？
• 我可以在html元素上以编程方式检查和修改Javascript事件处理程序吗？
• 如何使用Firebug(或类似工具)调试JavaScript/jQuery事件绑定

但是,他们都没有回答如何使用连接到节点的事件侦听器列表addEventListener,而无需addEventListener在创建事件侦听器之前修改原型.

VisualEvent不会显示所有事件侦听器(特定于iPhone的事件),我想以编程方式(稍微)执行此操作.

Answer 1

Chrome DevTools,Safari Inspector和Firebug支持getEventListeners(节点).

Answer 2

你不能.

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

DOM4 addEventListener

说

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

意味着将事件侦听器添加到"事件侦听器列表"中.就这样.这个列表应该是什么,也不应该如何访问它.

Answer 3

既然有这样做没有原生的方式,这是少管闲事的解决办法,我发现(不添加任何"老"的原型方法):

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