Wednesday, December 3rd, 2008
Visual Event: See where behaviour has been added to a page
Category: Utility
Wouldn’t it be nice to take a view of your application and see where the behaviour has been added? That is what is shown above, and it is courtesy of Allan Jardine and his new Visual Event tool.
Once you hover over an event, you get to see the code that will run:
Each type of event has its own icon, and all you need to do is use the bookmarklet to run it on any page.
When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.
It is due to this I’ve put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.
It turns out that there is no standard method for finding out what listeners have been attached to any particular node in a document, so I’ve resorted to parsing the event cache stored by the various Javascript libraries. Currently only jQuery and YUI are supported, but additional libraries can be added with ease.
Allan is keen to hear your thoughts. What would you like to see?
I feel like this promotes lazy coding. Any experienced coder knows that you save a ton of memory by assigning a couple top level events and using event delegation to capture the real target.
i think link is not correct.
Link is broken.
http://www.sprymedia.co.uk/article/Visual+Event
I think this is great and will be really useful. Only issue I’ve had (I’ve not fully read the attached article) is that on a site with a lot of events there is some overlap with the hotspots.
I don’t get why a tool such as this would promote lazy coding, maybe I don’t have enough experience.
camwest, can you point me at an example of this technique?
camwest: I see your point - but one of the goals I had in mind for this tool was actually to help developers reduce the number of event handlers by being able to quickly identify superfluous ones.
.
kim3er: Could you possible post the links as to which sites the layout breaks on? Or just send them to me direct: http://sprymedia.co.uk/contact
.
Thanks
Allan
@camwest is there a good example of how to set this up? I’ve read about the concept and setup some things that I _think_ are based on this idea, but I’ve never seen good example code.
I will use it a lot. In my quick test, the mouseout and mouseover event where show, but not the method they trigger.
@theallan - good point, with that intent this tool is great. but for me it shows a big huge event handler across my entire components =)
Perhaps I’ll write up a simple article detailing how to use event delegation with the various frameworks. It’s very simple.
Basically you assign an event handler to your entire component then use DOM traversal methods to check to see if the component is what you want it to be.
Here is a simple example:
Stop
Play
Then using jQuery you could go like this:
$(document).ready(function() {
$(’#videoPlayer’).click(function(e)) {
if($(e.target).hasClassName(’stop’)) {
stopFunction();
}
if($(e.target).hasClassName(’play’)) {
playFunction();
}
});
});
This is just a really quick example. There are many ways to handle it, but suffice it to say it’s the best way, you only have one event handler and you can dynamically create
… Oops for some reason
blocks still rendered HTML. You get the point.This tool sounds great. Sometimes I end up debugging other people’s code and when different tools collide it would be useful to know who is listening what.
It would be nice if there was a way to turn it off without having to reload the page. Would also be nice if the link to more info opened in a new tab. Other than that, I think this will be awesome for debugging!
garann: You can close Visual Event by pressing the ‘Esc’ key. That will remove the rendered display and kill off the Javascript control for it (there appears to be a bug which means this doesn’t work in Safari at the moment - I’ll address this shortly). Your second point about opening the info in a new page I fully agree with and I’ll put that in as well.
Allan
I think this is pretty awesome. I’m excited to see when this will implement MooTools.
I use event delegation a lot, but still this is a great tool.
Just a couple of days ago i searched my a.. off to find attached events and their programm flow. This was my own code, and it isnt too dirty. But i had some real probs finding out the side effects.
I found a good page discussing good example for Event Delegation with jQuery : http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery
jQuery.fn.delegate = function(eventType, rules) {
return this.bind(eventType, function(e) {
var target = $(e.target);
for(var selector in rules)
if(target.is(selector))
return rules[selector].apply(this, arguments)
})
}
And the way you would use it:
$(”#thing”).delegate(”click”, {
“.quit”: function() { /* do quit stuff */ },
“.edit”: function() { /* do edit stuff */ }
})
First, @theallan Thanks. Great stuff and really interesting discussion. Seems like I’ve been adding a new truly useful bookmarklet to my nav bar every couple days now.
You might want to look at the recently posted WTFramework bookmarklet. It toggles on and off when you click the bookmarklet. Quite clever. It appears that if you keep clicking on Visual Event it will load an increasing number of instances. Not that anyone would actually do this, but the usability addition in WTF is a really nice touch.
http://ajaxian.com/archives/detect-ajax-framework-with-wtframework
Cheers,
- D.
This is pretty darn usefull.
Well done.
I wish it was integrated into Firebug for even more convenience.
Thanks very much for the feedback everyone - it’s been absolutely brilliant to hear what you all think of this tool.
.
I’ve just put together an upgrade which includes a number of enhancements:
- Clicking the bookmarklet toggles it’s display (WTFramework style :-) )
- Add support for MooTools
- Looked into support for Prototype - doesn’t appear to cache the information that is needed (and is a private variable)
- Looked into support for Dojo - doesn’t appear to cache events at all
- API variable ‘VisualEvents’ for easy integration with libraries
This looks awesome. Any plans for Ext JS support?