Inspect attached event handlers for any DOM elemen

Question

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

Answer 1

You can use Visual Event by 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.

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

Answer 2

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.

Answer 3

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

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

A debugging tool as browser extension could get 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 Event takes this approach to discover listeners registered through a few popular frameworks.

Answer 4

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

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

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

Answer 5

Chrome Dev Tools recently announced some new tools for 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.

Finding Custom Events

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

• getEventListeners(window)
• getEventListeners(document)

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

Known Event

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

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

Answer 6

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.

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:

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