寫 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。