簡述

區別

在事件處理程式內部, 物件 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 和 target 的值. 由於click事件的目標是按鈕. 因此這三個值是相等的. 如果事件處理程式存在於按鈕父節點中 ( 例如 document.body ), 那麼這些值是不相同的.

//接著上面的例子, 由於js事件機制冒泡到了body
document.body.onclick = function(event) {
    alert(event.currentTarget === document
 
.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById('myBtn')); //true;
}

當單擊這個例子的按鈕時, this 和 currentTarget 都等於 document.body , 因為事件處理程式是註冊到這個元素上的. 然而, target 元素卻等於按鈕元素, 因為它是click事件真正的目標.