addEventListener和attachEvent二者绑定的执行函数中的this不相同
网络编程
写 addEventListener 和 attachEvent 区别的博文不少，不过大部分都把重点放置于前者是Firefox chrome，后者只是存在于IE系列中。
最近在写一个事件代理的时候，遇到一个BUG，发现除此外，二者绑定的执行函数中的 this 是不相同的，addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。
用了一个简单的demo来描述这个不同点：
点击 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。
js切换div css注意的细节
附上代码：!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadtitle/titlemetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/*具体
Ajax执行顺序流程及回调问题分析
一个全局的变量varJsonData;我这里有一个Ajax处理的方法：JScriptcode：functionGetJson(DataSourceName){$.ajax({type:post,url:Ajax/AjaxData.ashx?MethodName=+DataSourceName,contentType:a
iframe 上下滚动条如何默认在下方实现原理
问题：iframe上下滚动条如何默认在下方，做的是聊天工具，数据多了，每次刷新出现的上下滚动默认在上方，还需下拉到下面才能看到聊天记录，有办
编辑：568数据
标签：的是,函数,事件,绑定,变量