一句話區分currentTarget和target

邵天宇Soy發表於2019-04-30

currentTarget：事件處理程式註冊的元素， target：事件的實際目標元素

下面是2個不同的場景例子：

場景1：事件處理程式註冊的元素 === 事件的實際目標元素

<div id="div">
	<button id='ele'>按鈕</button>
</div>

var ele = document.getElementById('ele');
ele.onclick = function(e){
	console.log(e.target == this);  //true
	console.log(e.currentTarget == this);  //true
}
複製程式碼

在事件處理程式內部，物件this始終等於currentTarget ，而target則只包含事件的實際目標。

事件處理程式註冊的元素和事件的實際目標元素都是button，所以e.currentTarget == e.target == this

場景2：事件處理程式註冊的元素 != 事件的實際目標元素

<div id="div">
	<button id='ele'>按鈕</button>
</div>


var ele = document.getElementById('ele');
var div = document.getElementById('div');

//當點選頁面的按鈕時
div.onclick = function(e){
	console.log(e.currentTarget == this);  //true
	console.log(this == div);  //true
	console.log(e.target == ele);  //true
}
複製程式碼

當點選頁面的按鈕時，this 和currentTarget 都等於div，因為事件處理程式是註冊在這個元素上的；而target 等於ele，因為ele才是click事件的真正目標。

由於按鈕上並沒有註冊事件處理程式，結果click事件冒泡到了div上，在那裡事件才得到處理。

注意：使用attachEvent和detachEvent註冊事件時，事件處理程式會在全域性作用域中執行，此時this == window

相關文章