如何使用 JavaScript 在 DOM 节点上查找事件侦听器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10940104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:40:05  来源:igfitidea点击:

How to find event listeners on a DOM node using JavaScript

javascript

提问by screenm0nkey

I still can't belive this is not possible but is there a way to loop through the dom and see all event handlers attached using 'addEventListener'. This postand many others says no.

我仍然无法相信这是不可能的,但是有没有办法循环遍历 dom 并查看使用“addEventListener”附加的所有事件处理程序。这篇文章和许多其他人说不。

If that's the case then how do apps like Chrome's inspector or Firebug show them, which they do? I guess they probably augment the dom's methods in some way so they can track what's being bound.

如果是这种情况,那么像 Chrome 的检查器或 Firebug 之类的应用程序如何显示它们,它们是做什么的?我猜他们可能会以某种方式增强 dom 的方法,以便他们可以跟踪绑定的内容。

采纳答案by user123444555621

Of course browsers internally have a list of event listeners, but it is not exposed to page-level JavaScript. For example, Firebug (or Eventbug) probably use nsIEventListenerInfo.

当然浏览器内部有一个事件监听器列表,但它不会暴露给页面级的 JavaScript。例如, Firebug (或Eventbug)可能使用nsIEventListenerInfo

That being said, this old answer still holds:
How to find event listeners on a DOM node?

话虽如此,这个旧答案仍然成立:
如何在 DOM 节点上找到事件侦听器?

回答by Emil A.

Console of Chrome has a method that can help you check if a dom node has any event listeners registered, for example to check event listeners attached to the document node use:

Chrome 的控制台有一个方法可以帮助您检查 dom 节点是否注册了任何事件侦听器,例如检查附加到文档节点的事件侦听器使用:

https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

getEventListeners(document);

You could recursively iterate over all dom nodes and find all event handlers attached if needed.

您可以递归遍历所有 dom 节点,并在需要时找到所有附加的事件处理程序。

回答by willy wonka

On Chrome v53 console I tried:

在 Chrome v53 控制台上,我尝试过:

getEventListeners(document);

getEventListeners(文档);

that returns:

返回:

__proto__: Object

__proto__:对象

and sub elements, not what I'm looking for.

和子元素,不是我要找的。

So I've tried:

所以我试过:

getEventListeners(window);

getEventListeners(window);

that returns

返回

Object {beforeunload: Array[1], load: Array[1]}

对象 {beforeunload: Array[1], load: Array[1]}

That is what I'm looking for. So I think that the correct approach is the Robin like the bird's way:

这就是我要找的。所以我认为正确的做法是知更鸟之道:

getEventListeners(myDomElement):

getEventListeners(myDomElement):

where myDomElementis the targeted objectgot with standard ways like getElementById etc...

其中myDomElement是使用 getElementById 等标准方式获得的目标对象...

回答by Harshit Garg

use the following function to fetch the json of registered events;

使用以下函数获取已注册事件的 json;

getEventListeners(node_name);where node_namecan be an element name or its id.

getEventListeners(node_name);wherenode_name可以是元素名称或其 id。