How to find event attached to a DOM element?

0
votes

Firebug only show HTML and CSS by default. How can I find events attached to a DOM element? I want to inspect a theme but I don't know how I find events attached to a DOM element because there is no debugger.

Firebug executes code without showing anything. Is there a way to show those events?

3
javascriptjquerydebuggingdomfirebug
In chrome's dev tool, goto "Elements" tab. On right you'll see Styles, Computed, Event Listeners.... There you'll get all binded listeners for each event type, find what you need there. – Vivek
The questioner asks for the functionality in Firebug, not the Chrome DevTools. – Sebastian Zartner

3 Answers

0
votes

There is a universal solution for this

  • Hit F12 to open Dev Tools
  • Click the Sources tab
  • On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree Click on the events you want to listen for. *Interact with the target element, if they fire you will get a break point in the debugger
0
votes

If you are using jQuery, you can get a list of all registered events of an HTML element (not a jQuery object or selector) by executing

jQuery._data( elem, "events" );

in your firebug console.

Click here for more details.

0
votes

Firebug 2 has an Events side panel within the HTML panel listing all events attached to an element.

*Events* side panel within Firebug

It even displays wrapped listeners. I.e. if you're using a library like jQuery, you normally don't want to see the event handler function of jQuery but your own one, which is shown prefixed by a >.