如何使用JavaScript查找DOM节点上的事件监听器

Question

我仍然无法相信这是不可能的，但是否有一种方法可以循环遍历dom并查看所有使用'addEventListener'绑定的事件处理程序。 这篇文章和许多其他文章都说不行。

如果是这样，那么像Chrome的检查器或Firebug这样的应用程序如何显示它们，因为它们确实可以？我猜他们可能以某种方式增强了dom的方法，以便能够跟踪被绑定的内容。

- screenm0nkey

---

你在哪里看到Chrome或Firebug显示事件监听器？ - Steve H.

是的，我也很想知道你在哪里看到它们！我已经下载了Firebug的插件来显示它们，但你可能是对的，它们会在绑定事件监听器时跟踪。 - Ian

在Chrome网页检查器中，点击顶部的“元素”选项卡。它是最左边的一个。选择DOM中的一个元素，然后在右侧会显示有关所选元素的信息列表，例如样式、属性等。列表中的最后一项是事件监听器，它会提供您所需的所有信息。但是，您只能查看每个选定元素的信息，而不能查看整个DOM。因此我才会问这个问题 :) - screenm0nkey

Answer 1

Chrome的控制台有一个方法可以帮助您检查dom节点是否已注册任何事件监听器；例如，要检查附加到文档节点的事件侦听器，请使用： https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

getEventListeners(document);

如果需要的话，您可以递归迭代所有dom节点，并找到所有附加的事件处理程序。

- Emil A.

---

getEventListeners(myDomElement)在Chromium v.25的开发者工具控制台中可运行，但在实际代码中会抛出错误。 - Robin like the bird

@Robinlikethebird 是的，getEventListeners 是 Chrome 开发者工具控制台提供的方法，我正在寻找一种可以在运行时查找绑定到 DOM 的事件的方法。目前，我只找到了 jQuery 方法 $.data(element, 'events')。我正在寻找一种纯 JavaScript 或 DOM 的方法。 - Lin Du

现在也适用于Edge Chromium。 - Denis G. Labrecque

Answer 2

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

话虽如此，这个旧的答案仍然适用：
如何在DOM节点上找到事件监听器？

- user123444555621

Answer 3

在 Chrome v53 控制台中，我尝试了：

getEventListeners(document);

返回：

__proto__: Object

以及子元素，这不是我要找的。

所以我尝试了：

getEventListeners(window);

返回

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

这就是我正在寻找的东西。因此，我认为正确的方法是：

getEventListeners(myDomElement):

其中，myDomElement 是使用像 getElementById 等标准方式获取的目标对象。

- willy wonka

---

“正确的方法是像鸟一样的罗宾方式”，这是什么意思？ - Neutrino

@Neutrino 抱歉...我把剪贴板里的东西误贴到这里了，甚至没有意识到。我已经更正了这个短语。感谢您的注意。 - willy wonka

Answer 4

使用以下函数获取已注册事件的JSON： getEventListeners(node_name);其中node_name可以是元素名称或其ID。

- Harshit Garg