About the response level of javascript bubbling events under IE browser and Firefox

About the response level of javascript bubbling events under IE browser and Firefox_javascript skills

WBOY

Release： 2016-05-16 18:18:41

Original

886 people have browsed it

Suppose there is such a tag on our page:

Copy the code The code is as follows:

Now add this script to the page:

Copy the code The code is as follows:

 
< ;script type="text/javascript"> 

window.onload=function(){ //Bind events on elements at each level 
 window.onclick=func; 
document. onclick=func; 
 document.getElementById("timeDiv").onclick=func; 
 document.body.onclick=func; 
} 
function func(){ //Response function, output response The element 
　document.getElementById("timeDiv").innerHTML =this "
"; 
} 

Open the page under firefox and IE 8, in the tag testDiv ( Click on the gray square), and the results are as follows:

　
Results under firefox

Results of IE 8

As you can see, the results of the two are not the same? Why exactly is this happening?
It turns out that this is caused by the different levels of support for bubbling events in IE and Firefox. (If you don’t know much about bubbling events, you can check the relevant information first)
(1) In IE 6 and subsequent versions, the level supported by bubbling events reaches the document object.
(2) In Firefox (Mozilla 1.0 and later to be precise), support for bubbling events has been extended to the window object.
As a result, the above event response results are different.

Also, there is something interesting, have you noticed it? It is the response sequence of event targets. (The response sequence of bubbling events... seems a bit nonsense) We know that Firefox supports two event models at the same time, namely: capturing events and bubbling events. Here it is obvious that the event processing function acts in the bubbling stage. That is to say, if we use the traditional method of directly assigning values to event handler function attributes, for example:

Copy code The code is as follows:

document.body.onclick=func;

The event handler will be added to the bubbling phase of the event.

The above is an introduction to the bubbling event response level in IE and Firefox. At the same time, it also introduces the default processing of direct assignment of traditional event processing functions. For detailed explanation, please refer to "Javascript Advanced Programming" written by Nicholas C. Zakas.

PS: The above content is only personal reading notes. If there are any errors or omissions, please feel free to correct me. At the same time, I hope that more front-end enthusiasts can share your experiences!