Home > Article > Web Front-end > 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 EventVisual 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 eventsjQuery 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!