addEventListener和attachEvent二者绑定的执行函数中的this不相同
更新时间：2012年12月09日 17:32:23 作者：
写 addEventListener 和 attachEvent 区别的博文不少，不过大部分都把重点放置于前者是Firefox chrome，后者只是存在于IE系列中
写 addEventListener 和 attachEvent 区别的博文不少，不过大部分都把重点放置于前者是Firefox chrome，后者只是存在于IE系列中。
最近在写一个事件代理的时候，遇到一个BUG，发现除此外，二者绑定的执行函数中的 this 是不相同的，addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。
用了一个简单的demo来描述这个不同点：
<html xmlns="http://www.w3.org/1999/xhtml">
<<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<<title>测试</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"; // 定义一个全局变量
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>
点击 test1
chrome 下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" a1",第二次alert :"undefined"
这很好理解，这时候的this指向 #a1 这个DOM，所以alert id是 #a1的id “a1”，然后在this中，并没有testGolb这个变量，所以是undefined
点击 test2
chrome下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" undefined",第二次alert :"diff"
chrome 和 firefox同点击test1时候的表现是一致的，而IE就不同了。使用attachEvent绑定事件时候，函数中的this指向的是window，并不是添加事件的dom，所以第一次的alert 值是 undefined,而this.testGlob 的值是diff。
最近在写一个事件代理的时候，遇到一个BUG，发现除此外，二者绑定的执行函数中的 this 是不相同的，addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。
用了一个简单的demo来描述这个不同点：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<<title>测试</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"; // 定义一个全局变量
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>
点击 test1
chrome 下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" a1",第二次alert :"undefined"
这很好理解，这时候的this指向 #a1 这个DOM，所以alert id是 #a1的id “a1”，然后在this中，并没有testGolb这个变量，所以是undefined
点击 test2
chrome下 第一次alert:" a1",第二次alert :"undefined"
firefox 下 第一次alert:" a1",第二次alert :"undefined"
IE 中 第一次alert:" undefined",第二次alert :"diff"
chrome 和 firefox同点击test1时候的表现是一致的，而IE就不同了。使用attachEvent绑定事件时候，函数中的this指向的是window，并不是添加事件的dom，所以第一次的alert 值是 undefined,而this.testGlob 的值是diff。
相关文章
JavaScript 入门·JavaScript 具有全范围的运算符
JavaScript 入门·JavaScript 具有全范围的运算符...2007-10-10
这篇文章主要介绍了javascript RegExp 使用说明 ,需要的朋友可以参考下2016-05-05
FF（火狐）浏览器无法执行window.close()解决方案
这篇文章主要介绍了FF（火狐）浏览器无法执行window.close()解决方案,需要的朋友可以参考下2014-11-11
关于JavaScript的URL.createObjectURL()的使用方法
这篇文章主要介绍了关于URL.createObjectURL()的使用方法,使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存,还不清楚的朋友一起来看看吧2023-04-04
要弄清楚原型链就要先弄清楚 function 类型，在javascript中没有类的概念，都是函数，所以它是一门函数式的编程语言2014-02-02
下面小编就为大家带来一篇javascript运算符语法全面概述。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要详细介绍了javascript操作符"!~"，最基本也最容易忽略的东西，混了几年连基本都没了，被人问到得贻笑大方。2015-02-02
本文将详细介绍js arguments对象的使用方法，需要了解更多的朋友可以参考下2012-11-11
javascript操作html控件实例(javascript添加html)
几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作，深受大家的喜欢。如何使用javascript来操作HTML控件，下面我介绍下比较麻烦的几个控件2013-12-12
2008-01-01
最新评论