Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2011 (Cambridge, MA) with:

Viewing jQuery DOM Event Bindings With FireBug

By Ben Nadel on

The ease with which we can bind events to DOM elements using jQuery is a huge part of what makes jQuery so awesome. But, as with many things that are wired-up programmatically, when something doesn't work, it can be hard to figure out where it went wrong. One cool tip that I picked up reading Cody Lindley's jQuery Enlightenment book is that jQuery-bound events are actually stored in the data() method using the "events" key. This means that if we need to, we can use FireBug at runtime to inspect the events that are bound to a given DOM element.

 
 
 
 
 
 
 
 
 
 

The one caveat here (and maybe this is just my ignorance to the way in which FireBug works) is that we can't just inspect the DOM element to view the bound events. This is because the data() method doesn't actually store the data with the given DOM element; rather, it stores the data internally to jQuery using a unique ID that it attaches to the given DOM element. As such, to view the bound events, we'll actually need to call the data( "events" ) method on the given DOM element from the FireBug console command line.

But, it gets even more complicated than that - we need a way to reference the given DOM element in a unique way so that we can access it using a jQuery selector. In order to accomplish this, I created a script that uses advanced jQuery filtering to find all the DOM elements that have bound events and add a unique class name to them. This way, I can use the unique class name to access the DOM element from the FireBug console command line.

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <title>Viewing Events Attached To The DOM</title>
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  • // When the DOM is ready, initialize scripts.
  • $(function(){
  •  
  • // Attach click event to first link.
  • $( "a.event" )
  • .attr( "href", "javascript:void( 0 )" )
  • .click(
  • function( event ){
  • alert( "Hello There!" );
  •  
  • // Cancel default event.
  • return( false );
  • }
  • )
  • ;
  •  
  •  
  • // Attach the reveal event click event. This will
  • // highlight all of the evented links in gold and
  • // attached a unique class name so that we can
  • // easily grab that link with a jQuery selector.
  • $( "a.reveal" )
  • .attr( "href", "javascript:void( 0 )" )
  • .click(
  • function( event ){
  • var counter = 1;
  •  
  • // Find all of the items on the page that
  • // have events attached to them. We will
  • // use advanced filtering to get this.
  • $( "*" )
  • .filter(function(){
  • // Return only items that have the
  • // events data item.
  • return( $( this ).data( "events" ) );
  • })
  • .css( "background-color", "gold" )
  • .each(
  • function(){
  • $( this ).addClass( "evt" + counter++ );
  • }
  • )
  • ;
  •  
  • // Cancel default event.
  • return( false );
  • }
  • )
  • ;
  •  
  • });
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • Viewing Events Attached To The DOM
  • </h1>
  •  
  • <p>
  • Click
  • <a href="##" class="event">this link</a> and
  • <a href="##" class="event">that link</a>
  • </p>
  •  
  • <p>
  • <a href="##" class="reveal">Reveal event'ed items.</a>
  • </p>
  •  
  • </body>
  • </html>

As you can see above, once the "reveal" link is pressed, all event-having DOM elements are located and assigned a unique class name in the form of "evtX". This class name can then be leveraged to output the bound events:

  • $( ".evtX" ).data( "events" );

Of course, you could also just edit the HTML using FireBug, added a custom class name, and do the same thing. Either way, it's cool that this is possible.




Reader Comments

Much (definitely not all) of the time, the new(ish) versions of Firebug (at least in FF3.5+) already show attached events inline on the HTML tab.

Reply to this Comment

@Francois,

Cool idea. Also, I took at look at FireQuery as recommended by Adam and it is really cool. I would recommend checking it out.

Reply to this Comment

Yes, FireQuery is cool, but lately I use Google Chrome & its Inspector (kind of like a built-in Firebug). The boormarklet will be useful for us Chromians.

Reply to this Comment

Thanks for the share. This has been driving me crazy for a while. I hate combing through JQuery code trying to find selectors that could match what I am trying to find bindings for. My problem may be more in the way we are using our JQuery which is more procedural, and less object oriented.

Reply to this Comment

@Ben,

jQuery code, with all of the event binding, can be really hard to debug. And, if you didn't write the originally code - forget about it :) Being able to see the events bound to an object makes debugging it (or at least easier to find where the functions may be defined).

Reply to this Comment

I am one who likes to take a sneak peak in what others have done on their sites but always kept on wondering if this is so difficult and its a problem I am only facing. With time sure development of jquery apps will become lot more easier.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.