HOW TO study (or copy) code related to JavaScript effects from websites you envy

"The problem with quotes from the internet is you can never quite be sure they are genuine" - Abraham Lincoln

To build web apps with a great UI, its ok to draw inspiration from the best sites on the web. Sometimes the good-looking websites with great JavaScript effects may obfuscate their code knowingly or unknowingly or the code may be difficult to understand by just viewing the HTML source. 

Visual Events is a nifty bookmarklet that shows the events attached to each of the elements in a webpage. The keyboard & mouse events are represented as icons & when you mouse over any icon the source code related to it is shown. This is helpful because on JavaScript intensive sites you don't have to rummage through the entire source to find a small code block that you need.

For instance, when you mouse over a Tag button on the StackOverflow site, it shows a tooltip

If you call the Visual Event bookmarklet while this page is loaded, you will see this icon  over the javascript Tag button  indicating that there is a mouseover event attached to it. The complete mapping of icons & their corresponding events is listed on the Visual Event bookmarklet's homepage. When you hover your mouse pointer over the icon, the Visual Event bookmarklet scans through the source code & fetches just the code corresponding to the javascript Tag button's mouseover. The code window also informs that this particular StackOverflow webpage uses jQuery version 1.5.1 

Click image to enlarge 

This bookmarklet can detect event handler code that is written using one of these libraries -

• DOM 0 events
• jQuery 1.2.x +
• YUI 2.6.x (2.x might work!)
• MooTools 1.2.x
• Prototype 1.6.x
• JAK (Events 2.2)
• Glow

Visual Event is beta grade software. It doesn't currently work in IE

Also see:

The Joy of Bookmarklets

View Selection Source in IE

Add DOM Monster to your collection of Web Perf Analysis & Optimization tools