JS事件处理程序中的this

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。来看一个例子：

var btn=document.getElementById('myBtn');
btn.onclick=function(){
    alert(this.id);  //"myBtn"
}

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。来看一个例子：

var btn=document.getElementById('myBtn');
btn.onclick=function(event){
    alert(event.currentTarget===this);  //true
    alert(event.target===this);  //true
}

备注

• currentTarget:
  只读的Element类型。其事件处理程序当前 正在处理事件的那个元素。
• target:
  只读的Element类型。事件的目标。

因此，若事件是冒泡到祖先元素上进行处理的，则this和currentTarget是事件被委托的元素。来看一个例子：

//html
<div id="delegateEle">
    <div id="targetEle">click</div>
</div>

//javascript
var dom=document.getElementById('delegateEle');
dom.addEventListener('click',function(e){
    //以下为单击targetEle元素时的结果
    console.log(this.id);  //"delegateEle"
    console.log(e.currentTarget.id);  //"delegateEle"
    console.log(e.target.id);  //"targetEle"
});

注：以上在IE8及以下版本中不适用。