1.attachEvent与addEventListener的区别
attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。attachEvent第一个参数事件名前要加on，比如el.attachEvent(‘onclick‘, handleClick)。this不同。本文的将重点解释
2.attachEvent方式的事件绑定
attachEvent的this总是Window。例如：
el.attachEvent(‘onclick‘, function(){ alert(this); });
执行后会弹出对话框：[object Window]。
3.addEventListener方式的事件绑定
addEventListener的this总是当前正在处理事件的那个DOM对象。 DOM Level 2 Event Model中提到，事件处理包括捕获阶段、目标阶段和冒泡阶段 。如下图：
事件当前正在流过哪个元素，this便指向哪个元素。比如对于两级的DOM：
<div id="l1"> <div id="l2"></div> </div> <script type="text/javascript"> var l1 = document.getElementById(‘l1‘), l2 = document.getElementById(‘l2‘); l1.addEventListener(‘click‘, function () { console.log(‘l1 capture‘, this); }, true); l1.addEventListener(‘click‘, function () { console.log(‘l1 bubbling‘, this); }); l2.addEventListener(‘click‘, function () { console.log(‘l2 target‘, this); }); </script>
点击div#l2后控制台输出为：
l1 capture <div id=?"l1">?…?</div>? l2 target <div id=?"l2">?</div>? l1 bubbling <div id=?"l1">?…?</div>?
4.纠正attachevent
Event.addEvent = function(target,eventType,handle){ target.attachEvent(‘on‘+eventType,function(){ handle.call(currentTarget,arguments);//改变this指向 }); }
这里使用了currentTarget,我们再来顺着分析一下target与currentTarget。
addEventListener的事件处理函数中this不一定指向事实上被点击的元素， 但事件处理函数的参数Event对象提供了target和currentTarget属性来区分这当前对象与目标对象。 我们可以把它们都全部输出：
l1.addEventListener(‘click‘, function (e) { console.log(‘l1 capture‘, this, e.currentTarget, e.target); }, true); l2.addEventListener(‘click‘, function (e) { console.log(‘l2 target‘, this, e.currentTarget, e.target); }); l2.addEventListener(‘click‘, function (e) { console.log(‘l2 target, invalid capture‘, this, e.currentTarget, e.target); }, true);
结果是：
l1 capture <div id=?"l1">?…?</div>? <div id=?"l1">?…?</div>? <div id=?"l2">?</div>? l2 target <div id=?"l2">?</div>? <div id=?"l2">?</div>? <div id=?"l2">?</div>? l1 bubbling <div id=?"l1">?…?</div>? <div id=?"l1">?…?</div>? <div id=?"l2">?</div>?
可见currentTarget总是和this相同，而target指向事实上被点击的目标DOM对象。
5.补充:onclick在HTML和脚本中this指向的区别
脚本设置onclick方式的事件绑定
在javascript中设置DOM对象的onclick属性，this总是指向被设置的DOM元素。例如：
document .getElementById(‘l1‘) .onclick = function(){ console.log(this); };
点击div#l1后控制台输出为：
<div id="l1">...</div>
HTML中设置onclick方式的事件绑定
在HTML中设置onclick属性相当于让Window来调用该处理函数，于是this总是Window。例如：
<div onclick="clickHandler()"></div> <script> function clickHandler(){ console.log(this); } </script>
点击这个div后的控制台输出为：
Window {top: Window, location: Location, document: document, window: Window, external: Object…}
attachEvent和addEventListener区别
原文：http://www.cnblogs.com/shytong/p/5105536.html