Observe the following code:
If (window. attachEvent)
{
// IE
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "1" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "2" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "3" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "4" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "5" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "6" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "7" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "8" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "9" + "<br> ";});
}
Else
{
// Firefox
TestDiv. addEventListener ("click", function () {info. innerHTML + = "1" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "2" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "3" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "4" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "5" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "6" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "7" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "8" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "9" + "<br>" ;}, false );
}
What is the printed result?
In IE: 5, 7, 9, 8, 6, 4, 2, 3, 1.
In Firefox: 1, 2, 3, 4, 5, 6, 7, 8, 9.
We can see that in Firefox, the binding is executed first, but in IE, this seems a bit ...... Therefore, we do not expect that attachEvent will be executed in a specific order. We should pay special attention when writing event handlers.
All code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Language" content = "zh-cn"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> sequence in which attachEvent and addEventListener trigger events bound to the same object </title>
<Style type = "text/css">
# TestDiv
{
Padding: 10px 10px 10px 10px;
Border: 1px solid blue;
}
</Style>
</Head>
<Body>
<Div id = "testDiv"> click here. </Div>
<Div id = "info"> </div>
<Script language = "javascript" type = "text/javascript">
<! --
// Qianyi network http://www.cftea.com/
Var testDiv = document. getElementById ("testDiv ");
Var info = document. getElementById ("info ");
If (window. attachEvent)
{
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "1" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "2" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "3" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "4" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "5" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "6" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "7" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "8" + "<br> ";});
TestDiv. attachEvent ("onclick", function () {info. innerHTML + = "9" + "<br> ";});
}
Else
{
TestDiv. addEventListener ("click", function () {info. innerHTML + = "1" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "2" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "3" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "4" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "5" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "6" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "7" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "8" + "<br>" ;}, false );
TestDiv. addEventListener ("click", function () {info. innerHTML + = "9" + "<br>" ;}, false );
}
// -->
</Script>
</Body>
</Html>
Let's talk about addEventListener separately.
In the Firefox section above, whether useCapture is true or false, the results are the same. This is because the event-triggered object is the same as the event-bound object, so it has nothing to do with useCapture.
If you change <div id = "testDiv"> </div> to <div id = "testDiv"> <div>, click here. </Div>, and change a useCapture from false to true. The result is different. Execute true first. For more information, see event stream.