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:

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:

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

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!