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

简述

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

区别

在事件处理程序内部, 对象 this 始终等于 currentTarget 的值, 而 target 则只包含事件的实际目标. 如果直接将事件处理程序指定给了目标元素, 则this \ currentTarget \ target 包含相同的值.

如果上面的句子没有弄懂, 不要紧, 请细心看下去.

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

这个例子检测了 currentTargettarget 的值. 由于click事件的目标是按钮. 因此这三个值是相等的. 如果事件处理程序存在于按钮父节点中 ( 例如 document.body ), 那么这些值是不相同的.

1
2
3
4
5
6
//接着上面的例子, 由于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;
}

当单击这个例子的按钮时, thiscurrentTarget 都等于 document.body , 因为事件处理程序是注册到这个元素上的. 然而, target 元素却等于按钮元素, 因为它是click事件真正的目标.

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!