CODEWITHSUNDEEP
javascripteventsdom
Piskvor left the building
Piskvor left the building

Reputation: 92752

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

Is there a way to find what event handlers are attached to a given DOM node?

For example, when you click the "add comment" link, there's an event handler attached to it which shows the comment form. Now, if I have a DOM document (a web page), and want to list all the event handlers for one specific node, is there a way to do this?

(I suspect that it's not possible for JS running within the page; do browser extensions in FF have access to this data?)

Upvotes: 13

Views: 11589

Answers (3)

Xavi
Xavi

Reputation: 20439

In Chrome, you can use getEventListeners.

  1. Open Developer Tools
  2. Select the element you're interested in
  3. Type this the console: getEventListeners($0)
  4. Hit enter.

An object mapping event names to their handlers should be returned. Note that $0 is a special dev tools variable which always points to the last element selected in the "Elements" tabs.

Upvotes: 9

Andrew Koper
Andrew Koper

Reputation: 7199

In Chrome:

  1. "Inspect Element" on the element you want to know about
  2. In the "Elements" tab in developer tools, in the right-hand pane, click on "Event Listeners"

This will show you what event handlers are attached to that element.

(Krof's answer could have been more clearly written.)

Upvotes: 1

Klemen Slavič
Klemen Slavič

Reputation: 19841

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.

Upvotes: 12

Related Questions