Viewing jQuery DOM Event Bindings With FireBug
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.
Want to use code from this post? Check out the license.
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.
That's an interesting tidbit of information, Ben: thanks for sharing it.
@Christoph,
Oh good to know. I'll have to check to see if I'm rocking the latest version.
the FireQuery plugin for FireBug shows all jQuery .data() and such directly in the HTML view of Firebug, along with a bunch of other nifty features. A+++, Would DL Again!
http://firequery.binaryage.com/
thx Ben. Love to see your tutorials.
@ajpiano,
Oh awesome, I'll have to check that out. Thanks!
As you said, maybe not that practical, but if you make a bookmarklet out of this, it would be really useful!
@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.
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.
you can use http://getfirebug.com/
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.
@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).
.data("events") doesn't work with jQuery 1.5.1.
Any suggestions?
Thanks.
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.