Let's say there's a label on our page:
Copy Code code as follows:
<body>
<div id= "Testdiv" style= "Width:200px;height:200px;background: #c0c0c0;" ></div>
</body>
Now add this script to the page:
Copy Code code as follows:
<script type= "Text/javascript" >
Window.onload=function () {//binding events at various levels of elements
Window.onclick=func;
Document.onclick=func;
document.getElementById ("Timediv"). Onclick=func;
Document.body.onclick=func;
}
function func () {//Response functions, output response elements
document.getElementById ("Timediv"). innerhtml+=this+ "<br>";
}
In Firefox and IE 8 Open the page, in the label testdiv (gray box) on the click, the results are as follows screenshot:
Firefox under the results
The results of IE 8
As you can see, the results are not the same. Why on earth would that be?
It turned out to be due to the different levels of support for the bubble event by IE and Firefox. (If you are not very familiar with bubbling events, you can query the relevant information first)
(1) in IE 6 and subsequent versions, the bubbling event support level reaches the Document object.
(2) in Firefox (which is exactly the Mozilla1.0 and later), support for bubbling events has risen to the Window object.
This results in a different response to the above incident.
Besides, there's an interesting place I don't know if you noticed. is the order in which the event targets are responded. (Bubble Event Response order ...) It seems like a bit of nonsense. Firefox also supports two event models, namely, capture events and bubbling events. Here the apparent event handler function is in the bubbling phase. That is, if we use the traditional assignment directly to the event handler property, let's say:
Copy Code code as follows:
Document.body.onclick=func;
The event handler function is added to the bubbling phase of the event.
The above is an introduction to IE, Firefox bubble event response level, and incidentally introduced the use of traditional event processing functions directly assigned to the default processing. Detailed explanation can be found in Daniel Nicholas C. Zakas's "JavaScript Advanced Programming".
PS: The above content is only for individual reading notes, if there are errors and omissions, always welcome corrections. At the same time hope to have more front-end enthusiasts to share your experience!