Question

You know what I liked best about obtrusive javascript? You always knew what it was going to do when you triggered an event.

<a onclick="thisHappens()" />

Now that everybody’s drinking the unobtrusive kool-aid it’s not so obvious. Calls to bind events can happen on any line of any number of javascript file that get included on your page. This might not be a problem if you’re the only developer, or if your team has some kind of convention for binding eventhandlers like always using a certain format of CSS class. In the real world though, it makes it hard to understand your code.

DOM browsers like Firebug seem like they could help, but it’s still time consuming to browse all of an element’s event handler properties just to find one that executes the code you’re looking for. Even then it usually just tells you it’s an anonymous function() with no line number.

The technique I’ve found for discovering what JS code gets executed when events are triggered is to use Safari’s Profiling tool which can tell you what JS gets executed in a certain period of time, but that can sometimes be a lot of JS to hunt through.

There’s got to be a faster way to find out what’s happening when I click an element. Can someone please enlighten me?

Answer 1

If you’re using jQuery you can take advantage of its advanced event system and inspect the function bodies of event handlers attached:

$('body').click(function(){ alert('test' )})

var foo = $('body').data('events');
// you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.

$.each( foo.click, function(i,o) {
    alert(i) // guid of the event
    alert(o) // the function definition of the event handler
});

Or you could implement your own event system.