Some tips for viewing element event functions in JavaScript

In the analysis of some web pages, often found that clicking on a button will trigger an action, when the page is more complex, including a number of JS files, this time to find the trigger function of the code to write where it is more difficult. For example, in an HTML page, the following button is found, which causes the page element to change after a click. However, the OnClick event is not seen, which indicates that the event may have been bound by the AddEventListener method in JavaScript (ie does not support this method, using attachevent, and does not understand that Microsoft is going to do the same with the standard). For example, the following code:

<input type= "button" value= "Input" id= "BTN1" name= "n_btn1"/><label id= "LBL" ></label><br/>< Script type= "Text/javascript" > document.getElementById ("btn1"). AddEventListener ("click", func                tion () {alert ("OK");  }); </script>

To see BTN1-bound events, you can use Chrome's event listener implementation. As follows:

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;margin:0px;padding-left:0px ;p adding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard "border=" 0 "alt=" clipboard " Src= "http://s3.51cto.com/wyfs02/M01/58/73/wKioL1SxKBKB1Yv1AAJ40ZNGNEQ647.jpg" height= "258"/>

In addition, you can see the binding method through the command, the command line method in Chrome, Geteventlisteners (object) obtained, as follows:

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;margin:0px;padding-left:0px ;p adding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard[1] "border=" 0 "alt=" CLIPBOARD[1] "src=" http://s3.51cto.com/wyfs02/M02/58/73/wKioL1SxKBTDvZZ_AACokJ4eP0A774.jpg "height=" 185 "/>

Note: The Geteventlisteners method is a command line provided by Google for debugging, not a standard JavaScript function that can only be run in the console in Chrome, and there are many similar command lines that you can refer to:

Https://developer.chrome.com/devtools/docs/commandline-api (need to turn over the wall).

In addition, in the console's listener, only the first line of the function can be displayed, if you write a function that is multi-line, then you need to complete the command:

Geteventlisteners (document.getElementById ("BTN1")). Click[0].listener

The console will print out all of the functions.

If the code is bound with jquery, there is a problem with this approach, such as the code above, but the binding is as follows:

$ (function () {$ ("#btn1"). Click (function () {alert (' OK2 ')}); });

A method is bound by the click Method of jquery, and it turns out that listenerbody points to the code of jquery, such as:

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;margin:0px;padding-left:0px ;p adding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard[2] "border=" 0 "alt=" CLIPBOARD[2] "src=" http://s3.51cto.com/wyfs02/M00/58/73/wKioL1SxKBWBR_qjAAKdiGIfkeo844.jpg "height=" 274 "/>

This also illustrates that jquery has redefined a set of methods for the binding of events, so here is the code for jquery.

Fortunately, in jquery we can use Jquery._data (element, "events") method, there are few documents on this method, official documents here http://blog.jquery.com/2011/11/08/ building-a-slimmer-jquery/, referring to the method when an internal method is recorded for all elements of the event. There is an article on StackOverflow that describes the difference between this method and Jquery.data, address http://stackoverflow.com/questions/7788353/ Whats-the-difference-between-jquery-data-and-jquery-data-underscore-data.

Here, we just need to know that this method can be used to achieve our purpose-to see what events the element is bound to. We just need to enter the following code in the Chrome console:

$._data ($ ("#btn1") [0], ' events ');

Note that the parameter of the method is a DOM object, not a jquery object. It is therefore necessary to add a [0] to the DOM object. Specific example:

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;margin:0px;padding-left:0px ;p adding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard[3] "border=" 0 "alt=" CLIPBOARD[3] "src=" http://s3.51cto.com/wyfs02/M01/58/73/wKioL1SxKBeTjOU-AAFMxOLKWw4721.jpg "height=" 439 "/>

We finally see the event that the element is bound to, under the handler node.

In fact, this method can be written in the JS code, and the value of handler is actually a function, such as in the code as follows:

var p = $._data ($ (' #btn1 ') [0], ' events '). Click[0].handler;alert (typeof (P));p();

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;margin:0px;padding-left:0px ;p adding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard[4] "border=" 0 "alt=" CLIPBOARD[4] "src=" http://s3.51cto.com/wyfs02/M02/58/73/wKioL1SxKBnT_qL3AAA1lwcAsMA156.jpg "height=" 155 "/>

650) this.width=650; "Style=" background-image:none;border-bottom:0px;border-left:0px;padding-left:0px; padding-right:0px;border-top:0px;border-right:0px;padding-top:0px; "title=" clipboard[5] "border=" 0 "alt=" CLIPBOARD[5] "src=" http://s3.51cto.com/wyfs02/M00/58/73/wKioL1SxKBvSfQ0OAABZKy6k2no201.jpg "height=" 187 "/>

You can see that the type that pops up is the type of P is function, and you can call P directly.

Through the method described above, in the analysis of complex pages, it is easy to find the source of the event, tracking code, improve efficiency.

This article from "a blog" blog, reproduced please contact the author!

Some tips for viewing element event functions in JavaScript