AddEventListener and attachevent do not have the same "reprint" in the execution function that they are bound to

Source: Internet
Author: User

Yuanwen Http://www.jb51.net/article/32511.htm wrote AddEventListener and attachevent different blog posts, but most of them focus on the former is Firefox chrome, The latter only exists in the IE series write AddEventListener and attachevent differences in a lot of posts, but most of the focus on the former is Firefox Chrome, the latter only exists in the IE series.

Recently, when writing an event proxy, I encountered a bug that found that in addition to this, the AddEventListener and attachevent functions are not the same in the runtime context.
A simple demo is used to describe this difference:
Copy CodeThe code is as follows:
<<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<<title> Testing </title>
<<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"; Define 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>
Click Test1
First alert under Chrome: "A1", Second alert: "Undefined"
Firefox First alert: "A1", Second alert: "Undefined"
First Alert in IE: "A1", Second alert: "Undefined"
This is good to understand, this time the this point #a1 this DOM, so the alert ID is #a1的id "A1", and then in this, and there is no testgolb this variable, so is undefined
Click Test2
First alert under Chrome: "A1", Second alert: "Undefined"
Firefox First alert: "A1", Second alert: "Undefined"
First Alert in IE: "Undefined", Second alert: "diff"

Chrome and Firefox are consistent when they click Test1, and IE is different. When using the Attachevent binding event, this point in the function is to window, not the DOM of the event, so the first alert value is undefined, and the value of This.testglob is diff.

AddEventListener and attachevent do not have the same "reprint" in the execution function that they are bound to

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.