13

Say you have this div:

<div id="foo">bar</div>

And you do this:

$("#foo").click(someFunction);

somewhere inside your Javascript code.

Once the page has been loaded, is there a way to find out, via firebug or inspect element in Chrome, or anything else, that the click event for #foo is bound to someFunction? I.e., find this out without having to look through all your code?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ali
  • 261,656
  • 265
  • 575
  • 769
  • Possible duplicate of http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool?rq=1 –  Aug 08 '12 at 11:23
  • That question and it's accepted answer are jQuery specific. – ColBeseder Aug 08 '12 at 14:24

4 Answers4

16

Chrome Developer tools does this.

  1. right click an element
  2. click inspect element
  3. in the right hand column, scroll down to event listeners

This will give you a list of event listeners on the object that can be expanded to find their source and the attached function.

Firebug has this information under the DOM tab, but it's less user friendly.

ColBeseder
  • 3,579
  • 3
  • 28
  • 45
  • 5
    When I look at the click handler, it just points me to the jQuery source code. Should I be seeing something else where it shows me where in MY source code I used jQuery to define the event handler? – Jake Wilson Jan 22 '15 at 21:55
  • 3
    While this is correct this will only allow you to view the jQuery wrapper method that handles the event. it is quite tricky to navigate from there to the actual event handler using break points. ruidfigueiredo wrote some js that helps you to find the actual event handler quite easily. Check it out here: https://github.com/ruidfigueiredo/findHandlersJS You can paste the code from findEventHandlers.js straight into your console. No need to create an actual include. – Michael Thessel May 15 '15 at 03:08
7

You can use the console in browsers built-in developer tools. They are built-in for IE and Chrome while FF will need the Firebug AddOn installed. I don't know about other browsers.

Using the debugger console you can use jQuery data("events") to query for the attached events of an element. In addition those consoles also let you dynamically drill down into any additional detail of the events you are interested in.

$("#foo").data("events");

Executing the above in the console will display an object with a property for each event it found. In your example it returns an object with click property of type array storing all click events.

If you have click events and you want just that object you can execute the following in the console:

$("#foo").data("events").click;

Each event object has a handler property which will show you the function they are bound to:

Object
data: null
guid: 2
handler: function mytestFunction(){
arguments: null
caller: null
guid: 2
length: 0
name: "mytestFunction"
prototype: mytestFunction
__proto__: function Empty() {}
namespace: ""
origType: "click"
quick: null
selector: null
type: "click"
__proto__: Object

See DEMO, showing how to query and display the objects in the console.

Alternatively you can also use the "handlers" for an overall summary object:

$("#foo").data("handlers");

Note though that .data("events/handlers") will not include any events wired up embedded in html such as this:

<div id="foo" onclick="...">bar</div>

More information on the data() are in the documentation

Nope
  • 22,147
  • 7
  • 47
  • 72
3

I don't know about Firefox, but there's an easy way to see event listeners in Chrome and Safari. Just open the Developer Tools, select your element and scroll to the bottom of the CSS properties panel. You'll find an "Event Listeners" section.

Laurent Perrin
  • 14,671
  • 5
  • 50
  • 49
  • 2
    It is no longer under css, on Chrome there's a separate tab "Event Listeners", on Safari it's under node tab – Asaf M Dec 21 '20 at 09:11
2

I would suggest using Visual Event 2.

Here is the description on how to use it. I use it almost everyday and its a very good tool.

Clyde Lobo
  • 9,126
  • 7
  • 34
  • 61
  • We are also using Visual Events 2 but it has some issues trying to show scripts attached to dynamically loaded content. – Nope Aug 08 '12 at 11:39