41

When inspecting a page's DOM, I would like to know the attached event(s) of an element quickly

For example, if a button has this HTML DOM

<button id="button1">Click Me</button>

And somewhere (not in a place that I know in advance) it has an event attached, e.g.

$("#button1").click(function(){...});

I know it can be done programatically ( Can I find events bound on an element with jQuery? )

but is there a way using just one of the developer tools for Chrome / Firefox / IE to see a list of events?

Update: I found out that in the newer Chrome versions I have a tab called EventListeners but it seems it doesn't allow easy drill down all the way down to the source of the event, as jQuery wraps the original

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Eran Medan
  • 44,555
  • 61
  • 184
  • 276
  • You may take a look at [EventBug](http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug) Firebug extension. However I don't know how it integrates with jQuery. But in general, the support for event listeners is far from good in all the dev tools unfortunately. – jakub.g Jun 19 '12 at 19:32

6 Answers6

35

To get the first attached handler on the first $("#button1") element

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

The long story that nobody wants to hear: I came here searching for a plugin. I was thrilled to see @schmidlop's answer, but in jQuery that doesn't actually give me the listener I'm looking for, it just shows the generic handler for jQuery events that eventually call the specific callback. Im still looking for a Chrome plugin that would allow me to right click on an element and let me drill into the handlers attached to the object.

Cause that would be cool.

UPDATE: I found a chrome extension called jQuery Debugger. You simply "Inspect Element" and choose "jQuery Events" from the "Elements" submenu... https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimienter image description here

Gal Bracha
  • 19,004
  • 11
  • 72
  • 86
Shanimal
  • 11,517
  • 7
  • 63
  • 76
  • 1
    `$._data($("#button1").get(0),"events").click[0].handler` works great! – id.ot Feb 12 '14 at 18:24
  • 1
    That's awesome... very ideal since I don't need any tool. If Chrome's event listeners tab can do this, that would be awesome! – Web User Oct 31 '14 at 19:48
29

There is now an Event Listeners tab in Chrome.Event Listeners tab

schmidlop
  • 1,356
  • 16
  • 31
  • 1
    Note that in this tab you can filter by "All Nodes" or "Selected Node Only". – chipit24 Jun 27 '15 at 21:14
  • 2
    useless, since everything points to jquery. Using `firefox developer edition` you can actually find the correct handler which in my case is a Backbone view. – coding_idiot Oct 27 '15 at 12:12
24

With the Chrome inspector select the element in the "Elements" tab and then from the "Console" tab you can see the events attached to the element with getEventListeners($0);.

Florent2
  • 3,463
  • 3
  • 28
  • 38
  • 2
    getEventListeners only list the events bound to the element itself, not include all agent events by its parents. – diyism Sep 02 '14 at 08:41
  • 1
    @Shanimal its a convenience variable that Chrome sets in your console for you, see: https://willd.me/posts/0-in-chrome-dev-tools for a nice explanation. – ipd Aug 26 '16 at 17:16
  • Nice. So you select or inspect something and $0 refers to it in the console. Pretty darn nifty. – Shanimal Aug 26 '16 at 17:26
  • Here is what worked for me `getEventListeners(document.getElementById('button1'));` – Dmitry Feb 25 '19 at 16:23
4

Firefox's developer tools now display an "ev" next to elements which have bound events. This can be used to inspect bound events (including jQuery events).

Here is an example of inspecting the "First Paragraph" element from the jQuery click documentation:

Bound events in Firefox developer tools

djsutho
  • 5,174
  • 1
  • 23
  • 25
1

You can also check Visual Event addon available for chrome.

Gaurav Mishr
  • 572
  • 6
  • 21
0

FireQuery - http://firequery.binaryage.com/ lets you see events bound to elements and drill into them

olore
  • 4,687
  • 3
  • 28
  • 40