JavaScript中event对象中currentTarget和target的区别

简述

名称	功能
currentTarget	其事件处理程序当前正在处理事件的那个元素
target	事件的目标

区别

在事件处理程序内部, 对象 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事件真正的目标.