使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法拜银。因此,這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行肖方;換句話說祥绞,程序中的this引用當(dāng)前元素非洲。來看一個(gè)例子:
var btn=document.getElementById('myBtn');
btn.onclick=function(){
alert(this.id); //"myBtn"
}
在事件處理程序內(nèi)部鸭限,對(duì)象this始終等于currentTarget的值,而target則只包含事件的實(shí)際目標(biāo)两踏。如果直接將事件處理程序指定給了目標(biāo)元素败京,則this、currentTarget和target包含相同的值缆瓣。來看一個(gè)例子:
var btn=document.getElementById('myBtn');
btn.onclick=function(event){
alert(event.currentTarget===this); //true
alert(event.target===this); //true
}
備注
- currentTarget:
只讀的Element類型喧枷。其事件處理程序當(dāng)前 正在處理事件的那個(gè)元素。- target:
只讀的Element類型弓坞。事件的目標(biāo)隧甚。
因此,若事件是冒泡到祖先元素上進(jìn)行處理的渡冻,則this和currentTarget是事件被委托的元素戚扳。來看一個(gè)例子:
//html
<div id="delegateEle">
<div id="targetEle">click</div>
</div>
//javascript
var dom=document.getElementById('delegateEle');
dom.addEventListener('click',function(e){
//以下為單擊targetEle元素時(shí)的結(jié)果
console.log(this.id); //"delegateEle"
console.log(e.currentTarget.id); //"delegateEle"
console.log(e.target.id); //"targetEle"
});