The page effect is screenshot below:
Three of the most common event binding methods are used in test code
FIREFOX:
The test1 element is selected in the 1,firefox Firebug:
Right DOM tab, select Show All attributes:
In which the attributes array was found, as follows:
This is because the two event handles of the Test1 element are written directly into the element, and no more information is found in the list below, in which case the event handle can only be found in the attributes of the Firebug DOM tag.
2, select the test2 element:
Right DOM tab:
Test2, which binds event handlers in JavaScript, is displayed as a "user-defined attribute" in the DOM tab, and the right mouse clicks to view the relevant information:
3, select the test3 element:
This time no information about this element binding event was found in the DOM tab ...
All in all, firebug in the standard bound event function (AddEventListener), it is not good to detect an element bound event function, (do not say try to print the element's OnClick property, AddEventListener bindings have nothing to do with the onclick binding, in which case you get nudefined, and if the first two events are tied down, you can get some simple information.
-----
OPERA:
1, select Test1 in Opera's dragonfly :
The relevant information can be found in the list of properties to the right:
Click the plus sign to see the binding's function information as well:
To see a function body, there is an easy way to enter directly into the console:
Directly print out function body, more convenient!
2, choose test2 and test1 almost the same, do not repeat it;
3, select test3:
Nothing is found in the property tag on the right, and both the onclick and onmouseover values are null.
All in all, Opera Dragonfly and Firefox Firebug behaved almost as if it was not very clear what events were bound to an element under a standard binding function.
-----
Chrome:
It's a lot clearer under Chrome:
1, select test1 (or test2) in the Debug tool, which is similar to the two
Look at the information bit on the right:
The Event Listeners in Chrome is a nice gadget that lists the listening functions that are already bound to the currently selected element, and clicks the small black triangle to see the information about the binding function:
There are two items in the click, the first is Div#test1, this is the onclick function information we bind, and the second document can not be viewed (Chrome itself);
Isattribute:true: explains that this onclick function handle is treated as an element attribute (because we are using the onclick = function () {...}, either test1 or test2);
linenumber:18: describes the location of the binding function;
usecapture:false: description does not use event capture; Other semantics are very strong, do not say;
Similarly, in the first htmldivelement list of Properties , both Test1 and test2 can see:
2, check test3:
Both OnClick and onmouseover will become null in Properties, but Event Listeners is still:
But notice the div#test3 here:
Isattribute turned false because we didn't use the onclick attribute, but we used the AddEventListener.
Remember this first! It's a little messy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
