Visually view all events attached to DOM elements

I recently found this tool called Visual Event which helps you view and inspect all events attached to DOM elements on a web page.  I have wanted a tool like this for a long time.  Often when programming with many events on a page it is hard to see exactly what code is attached to what element.  This tool is able to show you all events attached on a page and allows you to view the code that will execute for that event.

visualEvent1

Visual Event also understands events registered from several different frameworks/methods:

  • 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

When I tested Visual Event I found that it works great in Opera 11, Firefox 3.6 and Chrome 10 but as listed on their webpage it does not yet support IE at all. It would be really cool if the developer tools in browsers natively supported this functionality but until then I recommend trying this out.

This entry was posted in HTML, JavaScript. Bookmark the permalink.

2 Responses to Visually view all events attached to DOM elements

  1. fiance says:

    Spot on with this write-up, I really think this website needs much more attention.
    I’ll probably be returning to see more, thanks for the information!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>