Javascript 检查任何 DOM 元素的附加事件处理程序

Inspect attached event handlers for any DOM element

提问by Claudio Redi

Is there any way to view what functions / code are attached to any event for a DOM element? Using Firebug or any other tool.

有什么方法可以查看 DOM 元素的任何事件附加了哪些函数/代码？使用 Firebug 或任何其他工具。

采纳答案by bobince

Event handlers attached using traditional element.onclick= handleror HTML <element onclick="handler">can be retrieved trivially from the element.onclickproperty from script or in-debugger.

使用传统element.onclick= handler或 HTML附加的事件处理程序<element onclick="handler">可以element.onclick从脚本或调试器中的属性中轻松检索。

Event handlers attached using DOM Level 2 Events addEventListenermethods and IE's attachEventcannot currently be retrieved from script at all. DOM Level 3 once proposed element.eventListenerListto get all listeners, but it is unclear whether this will make it to the final specification. There is no implementation in any browser today.

使用 DOM Level 2 EventsaddEventListener方法和 IE附加的事件处理程序attachEvent目前根本无法从脚本中检索。DOM Level 3 曾经提议element.eventListenerList获取所有侦听器，但尚不清楚这是否会使其成为最终规范。目前在任何浏览器中都没有实现。

A debugging tool as browser extension couldget access to these kinds of listeners, but I'm not aware of any that actually do.

作为浏览器扩展的调试工具可以访问这些类型的侦听器，但我不知道实际上有什么。

Some JS frameworks leave enough of a record of event binding to work out what they've been up to. Visual Eventtakes this approach to discover listeners registered through a few popular frameworks.

一些 JS 框架留下了足够的事件绑定记录来计算它们一直在做什么。Visual Event采用这种方法来发现通过一些流行框架注册的侦听器。

回答by tuxtitlan

The Elements Panel in Google Chrome Developer toolshas had this since Chrome releases in mid 2011 and Chrome developer channel releases since 2010.

自 2011 年中期 Chrome 发布和自 2010 年以来 Chrome 开发者频道发布以来，Google Chrome 开发者工具中的Elements Panel就已拥有此功能。

Also, the event listeners shown for the selected node are in the order in which they are firedthrough the capturing and bubbling phases.

此外，为选定节点显示的事件侦听器按照它们在捕获和冒泡阶段被触发的顺序。

Hit command+ option+ ion Mac OSX and Ctrl+ Shift+ ion Windows to fire this up in Chrome

命中command+ option+i在Mac OSX和Ctrl+ Shift+i在Windows上的Chrome火这件事

回答by GFargo

Chrome Dev Toolsrecently announced some new tools for Monitoring JavaScript Events.

Chrome Dev Tools最近发布了一些用于Monitoring JavaScript Events 的新工具。

TL;DR

Listen to events of a certain type using monitorEvents().

Use unmonitorEvents()to stop listening.

Get listeners of a DOM element using getEventListeners().

Use the Event Listeners Inspector panel to get information on event listeners.

TL; 博士

使用 收听某种类型的事件monitorEvents()。

使用unmonitorEvents()停止监听。

使用 获取 DOM 元素的侦听器getEventListeners()。

使用 Event Listeners Inspector 面板获取有关事件侦听器的信息。

Finding Custom Events

查找自定义事件

For my need, discovering custom JS events in 3rd party code, the following two versions of the getEventListeners()were amazingly helpful;

根据我的需要，在 3rd 方代码中发现自定义 JS 事件，以下两个版本getEventListeners()非常有用；

• getEventListeners(window)
• getEventListeners(document)

• getEventListeners(window)
• getEventListeners(document)

If you know what DOM Node the event listener was attached to you'd pass that instead of windowor document.

如果您知道事件侦听器附加到哪个 DOM 节点，您将传递它而不是windowor document。

Known Event

已知事件

If you know what event you wish to monitor e.g. clickon the document body you could use the following: monitorEvents(document.body, 'click');.

如果您知道要监视的事件，例如click在文档正文上，您可以使用以下内容：monitorEvents(document.body, 'click');.

You should now start seeing all the click events on the document.bodybeing logged in the console.

您现在应该开始看到document.body控制台中记录的所有点击事件。

回答by mhenry1384

You can view directly attached events (element.onclick = handler) by looking at the DOM. You can view jQuery-attached events in Firefox using FireBug with FireQuery. There doesn't appear to be any way to see addEventListener-added events using FireBug. However, you can see them in Chrome using the Chrome debugger.

您可以通过查看 DOM 来查看直接附加的事件（element.onclick = handler）。您可以使用 FireBug 和 FireQuery 在 Firefox 中查看 jQuery 附加事件。似乎没有任何方法可以使用 FireBug 查看 addEventListener 添加的事件。但是，您可以使用 Chrome 调试器在 Chrome 中查看它们。

回答by Medlock Perlman

You can use Visual Eventby Allan Jardine to inspect all the currently attached event handlers from several major JavaScript libraries on your page. It works with jQuery, YUI and several others.

您可以使用Allan Jardine 的Visual Event来检查页面上几个主要 JavaScript 库中所有当前附加的事件处理程序。它适用于 jQuery、YUI 和其他几个。

Visual Event is a JavaScript bookmarklet so is compatible with all major browsers.

Visual Event 是一个 JavaScript 书签，因此与所有主要浏览器兼容。

回答by Rolf

You can extend your javascript environment to keep track of event listeners. Wrap (or 'overload') the native addEventListener() method with some code that cans keep a record of any event listener added from then onwards. You'd also have to extend HTMLElement.prototype.removeEventListener to keep records that accurately reflect what is happening in the DOM.

您可以扩展您的 javascript 环境以跟踪事件侦听器。用一些代码包装（或“重载”）本机 addEventListener() 方法，这些代码可以记录从那时起添加的任何事件侦听器。您还必须扩展 HTMLElement.prototype.removeEventListener 以保留准确反映 DOM 中发生的情况的记录。

Just for the sake of illustration (untested code) - this is an example of how you would 'wrap' addEventListener to have records of the registered event listeners on object itself:

只是为了说明（未经测试的代码） - 这是一个示例，说明如何“包装” addEventListener 以在对象本身上记录已注册的事件侦听器：

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}