Home > Developer > JavaScript
Add the following script to the page:Copy codeThe Code is as follows: <script type = "text/javascript">
Window. onload = function () {// bind events to elements at various levels
Window. onclick = func;
Document. onclick = func;
Document. getElementById ("timeDiv"). onclick = func;
Document. body. onclick = func;
}
Function func () {// response function, which outputs the response element
Document. getElementById ("timeDiv"). innerHTML + = this + "<br> ";
}
Open the page under firefox and IE 8, and click the tag testDiv (Gray Square). The results are as follows:
Results In firefox
Results in IE 8
As you can see, the two results are not the same? Why?
It turns out that IE and Firefox have different levels of support for bubble events. (If you are not familiar with bubble events, you can query relevant information first)
(1) In IE 6 and later versions, the level supported by the bubble event reaches the document Object.
(2) In firefox (more accurately, Mozilla1.0 and later), the Support for bubble events has been raised to window objects.
As a result, the above event response results are different.
What's interesting? Is the response sequence of the event target. (The response sequence of the bubble event... We know that firefox supports two event models at the same time: capture-type events and bubble-type events. Here, it is obvious that the event processing function is used in the bubble stage. That is to say, if we use a traditional method to directly assign values to the attributes of event processing functions, for example:
Copy codeThe Code is as follows: document. body. onclick = func;The event handler function is added to the event bubble stage.
The above is an introduction to the bubble Event Response Level in IE and firefox. It also introduces the default processing of direct assignment using traditional event processing functions. For more information, see "javascript advanced programming" by Daniel Nicolas C. Zakas.
PS: The above content is only for personal reading notes. If you have any mistakes, please feel free to correct them. At the same time, we hope to share your experiences with more front-end fans!
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
