Visual Event Plug-in----View the elements of HTML element-bound events and methods

Web standards advocate the separation of structure, performance and behavior , and now more and more use this expression and behavior of the way, but it also for our development and debugging brings some problems, Web page loading a bunch of javascript, we have difficulty figuring out which elements in the last which action bound events, In particular, JavaScript loads events in a variety of ways, through jquery, Element.click = function () {}, Element.addeventlistener () ..., and it is difficult to find all events from a single point. It is difficult to trace the behavior behind a click action until we encounter the following two kinds of sharp things.

The Chrome Developer Tool has the ability to view HTML element bindings , as shown in:

But this way of looking at events is still a bit difficult until you encounter it chrome plugin Chrome Web store-visual Event

Visual Event works by being familiar with the main JavaScript libraries (for example, JQuery, YUI, ExtJS) event mechanisms, which can be used to extract events in depth and label them on object elements. The currently supported JS libraries include:

DOM 0 eventsjquery 1.2+yui 2MooTools 1.2+prototype 1.6+glow

When Visual event is enabled, a bound event element is marked with a blue chunk, and the mouse pauses to display the details of the event. As shown in the following:

Visual Event Plug-in----View the elements of HTML element-bound events and methods