Home > Developer > JavaScript
There are many blog posts about the differences between addEventListener and attachEvent, but most of them focus on Firefox chrome, and the latter only exists in the IE series.
Recently, when I was writing an event proxy, I encountered a BUG and found that, apart from this, the execution functions bound to the two are different, the running context of the addEventListener and attachEvent functions is different.
A simple demo is used to describe the difference:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> test </title>
</Head>
<Body>
<Div id = "div1">
<A href = "#" id = "a1"> test1 </a>
</Div>
<Div id = "div2">
<A href = "#" id = "a2"> test2 </a>
</Div>
</Body>
<Script type = "text/javascript">
Var testGolb = "diff"; // defines a global variable.
Var a1 = document. getElementById ("a1 ");
Var a2 = document. getElementById ("a2 ");
Function getEleId (e ){
// Body...
Alert (this. id );
Alert (this. testGolb );
}
A1.onclick = getEleId;
If (a2.attachEvent ){
A2.attachEvent ("onclick", getEleId );
} Else {
A2.addEventListener ('click', getEleId );
}
</Script>
</Html>
Click test1
The first alert in chrome: "a1", the second alert: "undefined"
The first alert in firefox: "a1", the second alert: "undefined"
The first alert in IE: "a1", the second alert: "undefined"
This is easy to understand. At this time, this points to the # a1 DOM, so alert id is # a1's id "a1". Then in this, there is no testGolb variable, so it is undefined.
Click test2
The first alert in chrome: "a1", the second alert: "undefined"
The first alert in firefox: "a1", the second alert: "undefined"
The first alert in IE: "undefined", the second alert: "diff"
Chrome and firefox are consistent with test1, While IE is different. When binding an event using attachEvent, this in the function points to the window instead of the event dom. Therefore, the first alert value is undefined, and the value of this. testGlob is diff.
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
