Sharing of powerful tools using event methods bound to html elements

WEB standards advocate the separation of structure, performance and behavior. Now more and more people are adopting this method of performance and behavior, but it also brings some problems to our development and debugging. Once the web page is loaded, With a lot of JavaScript, it is difficult for us to figure out which element and which action is finally bound to the event, especially JavaScriptloading event in various ways, which can be clearly understood Through jQuery, element.click = function() { }, element.addEventListener()..., it is difficult to find all events in a single place. If we can't figure out the ins and outs of the incident, it becomes a little difficult to track the behavior behind a certain click action, until we encounter the following two sharp tools.

Chrome Developer Tools has the function of viewing HTML elementsbinding events, as shown below:

But it is still a bit difficult to view events in this way until you encounter the chrome plug-in Chrome Web Store - Visual Event

Visual Event Operation The principle is that it is familiar with the event mechanism of major JavaScript libraries (such as: jQuery, YUI, ExtJS), and can deeply retrieve events and mark them on the object element. Currently supported JS libraries include:

DOM 0 events

jQuery 1.2+
YUI 2
MooTools 1.2+
Prototype 1.6+
Glow

at When enabled, elements will be marked with a blue block, and the details of the event will be displayed when the mouse is paused. As shown below:

The above is the detailed content of Sharing of powerful tools using event methods bound to html elements. For more information, please follow other related articles on the PHP Chinese website!