Skip to main content
Ben Nadel at Angular 2 Master Class (New York, NY) with: Todd Tyler
Ben Nadel at Angular 2 Master Class (New York, NY) with: Todd Tyler

Viewing jQuery DOM Event Bindings With FireBug

By
Published in Comments (14)

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

1 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.

15,883 Comments

@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.

2 Comments

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.

1 Comments

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.

15,883 Comments

@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).

1 Comments

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.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel