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

IT技术 javascript dom-events
2021-01-26 13:06:28

我已经看过这些问题:

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

VisualEvent不显示所有事件侦听器(特定于 iPhone 的事件侦听器),我想以编程方式(在某种程度上)执行此操作。

5个回答

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

getEventListeners(文档)

我想指出 getEventListeners 方法不支持 Firefox 35 版本。
2021-04-03 13:06:28
不是 Firefox 69。
2021-04-08 13:06:28
它可能不适用于 Firefox,但是开发人员又会在多个浏览器上进行开发/如果需要修改现有站点,这肯定会有所帮助......很多!
2021-04-10 13:06:28

你不能。

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

DOM4 添加事件监听器

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

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

我已经看到一些关于为此向 DOM 添加 API 的线程。
2021-03-26 13:06:28
@TimDown 编辑有帮助。看到没有像“getEventListeners”这样的东西的规范证明为什么没有这样的东西。
2021-04-01 13:06:28
@user973810:您希望他如何证明这一点?DOM API 没有提供这样做的方法,并且在当前的浏览器中没有非标准的方法来做到这一点。至于为什么会这样,我真的不知道。想要做的事情似乎是合理的。
2021-04-06 13:06:28
有没有机会为它必须以这种方式工作提供一些理由或推理?显然浏览器知道所有的监听器是什么。
2021-04-10 13:06:28

由于没有本地方法可以做到这一点,这是我发现的侵入性较小的解决方案(不要添加任何“旧”原型方法):

var ListenerTracker=new function(){
    var targets=[];
    // listener tracking datas
    var _elements_  =[];
    var _listeners_ =[];
    this.init=function(){
        this.listen(Element,window);
    };
    this.listen=function(){
        for(var i=0;i<arguments.length;i++){
            if(targets.indexOf(arguments[i])===-1){
                targets.push(arguments[i]);//avoid duplicate call
                intercep_events_listeners(arguments[i]);
            }
        }
    };
    // 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(target){
        var _target=target;
        if(target.prototype)_target=target.prototype;
        if(_target.getEventListeners)return;
        if(typeof(_target.addEventListener)!=='function'||typeof(_target.removeEventListener)!=='function'){
            console.log('target=',target);
            throw('\nListenerTracker Error:\nUnwrappable target.');
        }
        // backup overrided methods
        var _super_={
            "addEventListener"      : _target.addEventListener,
            "removeEventListener"   : _target.removeEventListener
        };

        _target["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
            var uc=(typeof(useCapture)==='object'?useCapture.useCapture:useCapture)?1:0;
            if(!listeners[uc][type])listeners[uc][type]=[];
            listeners[uc][type].push({cb:listener,args:arguments});
        };
        _target["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=(typeof(useCapture)==='object'?useCapture.useCapture:useCapture)?1:0;
            if(!listeners[useCapture][type])return;
            var lid = listeners[useCapture][type].findIndex(obj=>obj.cb===listener);
            if(lid>-1)listeners[useCapture][type].splice(lid,1);
        };
        _target["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].cb,
                                "args":list[type][id].args,
                                "useCapture":!!useCapture
                            });
                        }
                    }
                }else{// all
                    for(var _type in list){
                        for(var id in list[_type]){
                            result.push({
                                "type":_type,
                                "listener":list[_type][id].cb,
                                "args":list[_type][id].args,
                                "useCapture":!!useCapture
                            });
                        }
                    }
                }
            }
            return result;
        };
    };

}();


ListenerTracker.init();

编辑

来自@mplungjan 的建议:修改为收听可包装目标(singleton|constructor)。'init' 跟踪Elementwindow

其他可包装目标的示例:

ListenerTracker.listen(XMLHttpRequest);

来自@kodfire 的建议:您可以使用args属性获得可选参数

窗口对象是独立的,并没有从继承元素如果你想拦截 的窗口阅读进度,你将不得不将此代码复制并替换Element.prototypeHTMLElement.prototype窗口
2021-03-20 13:06:28
可以用类似的脚本来拦截window.addEventListener吗?
2021-03-27 13:06:28
您还应该让它拦截窗口事件侦听器。除此之外,这很好用!
2021-04-04 13:06:28
@kodfire 谢谢。跟踪器全局重载 HTMLElement 事件方法。所以一旦你调用了ListenerTracker.init(); 每个新事件都会被堆叠,你可以element.getEventListeners();从任何脚本调用
2021-04-05 13:06:28
太棒了 :)) 是否可以getEventListeners在 javascript 而不是在 devtools 中调用
2021-04-07 13:06:28

我找不到使用代码执行此操作的方法,但在 Firefox 64 中,开发者工具检查器中的每个 HTML 实体旁边都列出了事件,如 MDN 的检查事件侦听器页面上所述,如下图所示:

FF 检查员的屏幕截图

您可以使用 $._data($('[selector]')[0],'events'); 获取所有 jQuery 事件。将 [选择器] 更改为您需要的。

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

我也写了我自己的插件,用更好的格式来做到这一点。

但无论如何,我们似乎无法收集由 addEventListener 方法添加的事件。也许我们可以包装 addEventListener 调用来存储在我们的包装调用之后添加的事件。

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

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

更新:现在我们可以看到由 addEventListener 方法添加的事件,请参阅此问题的正确答案。

是的,但是当我回答时,开发工具中没有这种能力。所以,没有什么可以选择的。
2021-03-20 13:06:28
@Rantiev 已弃用,您可以删除该答案吗?
2021-04-02 13:06:28
这是一个私有且已弃用的接口,它可能很快就会消失,所以不要依赖它。
2021-04-05 13:06:28