Inspect Attached Event Handlers for Any Dom Element

Inspect attached event handlers for any DOM element

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.

How to find event listeners on a DOM node in JavaScript or in debugging?

If you just need to inspect what's happening on a page, you might try the Visual Event bookmarklet.

Update: Visual Event 2 available.

What event handlers are attached to a DOM node - how to find?

Chrome (and I suspect Safari) can show attached event listeners when you select an element in the DOM and then scroll down the right sidebar to the Event Listeners section. There, you can see which functions are attached.

I don't have a copy of Firebug at the moment, but I suspect the DOM tab to show similar information in Firefox as well.

View DOM level 2 Event handlers in IE

Yes, you can easily see DOM2 handlers:

• Right-click the element with the event handler and choose Inspect Element

• That should trigger the DOM Explorer tab; if not, do so

• Pick the Events tab on the right-hand side

It lists the event handlers attached to the element, including DOM2 ones.

For instance, using this fiddle:

<div id="target">
I have a DOM2 event handler.
</div>

function thisIsADOM2Handler() {
    this.style.color = "green";
}
document.getElementById("target").addEventListener("click", thisIsADOM2Handler, false);

I followed the steps above to see this:

I need to list the attached event handlers to window unload event

You'll find the handlers for the window unload event listed on the body element, so navigate there in the DOM Inspector to see them:

Get all events handlers attached to an element

The short answer is that it's not possible to reliably determine all the listeners on an element just using javascript.

The long answer is that there is no standard mechanism to list all attached listeners. Some libraries keep a list of listeners that have been attached using the library, but don't necessarily know about other listeners. Listeners added in the markup or as element properties can be found by testing related element properties and attributes (somewhat tedious testing for onclick, onchange, onblur, etc. for each element). But it's impossible to find a listener added using addEventListener or attachEvent unless a reference has been kept somewhere and it's made available (see comment about libraries).

Also, there are "delegated" listeners that give the appearance of being attached to an element when in fact they are attached to a parent element.

Attaching event handler to DOM elements

Use this:

document.getElementById('element_id').onclick = function(){ playerMove(this); };

For each Div, change 'element_id' with 'one', 'two', ...

How can I see the event that is attached to an html element?

If you use Firefox and Firebug you can try installing FireQuery. It will make it so you can see the handlers bound by jQuery. http://firequery.binaryage.com/

How do I get the element that an event handler was attached to from inside the handler?

Just use the element you're already using in the loop. this is also set to the current element:

$$('.two').each(function(element) {
    element.on('click', function(e) {
        alert(this.dataset.tag);
    });
});

How to find event listeners on a DOM node using JavaScript

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.

That being said, this old answer still holds:

How to find event listeners on a DOM node?

Get event listeners attached to node using addEventListener

Chrome DevTools, Safari Inspector and Firebug support getEventListeners(node).

---

Related Topics