javascript event.target 和 event.currentTarget

1、target发生在事件流的目标阶段,而currentTarget发生在事件流的整个阶段(捕获、目标和冒泡阶段)
2、只有当目标流处于目标阶段的时候才相同

3、而当事件流处于捕获和冒泡阶段时,target指向被点击的对象,而currentTarget指向当前事件活动的对象,通常是事件的祖元素。

用最简单的语言总结:
target: 代表当前目标对象(事件作用的对象)
currentTarget: 代表注册监听器的对象
this: 和currentTarget一样,即它们的作用相等。

ps:什么是“事件作用的对象”?什么是注册监听器的对象?
>事件作用的对象: 如果是一个点击事件的话,那么你点击了谁,谁就是这个点击事件的作用对象
(你打了谁,谁就是被你打了的对象)
>注册监听器的对象: 监听事件的对象(元素)你点击的元素不一定就注册了监听器,也许是它的子元素或者父元素。
总结:判断三者的关键是:弄清到底是谁注册了监听器,又是谁被点击了(对事件产生作用了)。
currentTarge、this是和“注册监听器的对象”是一伙。target和“当前目标对象”是一对。


<div id="outer" style="background:#099"> 
click outer 
<p id="inner" style="background:#9C0">click inner</p> 
<br> 
</div>
 
<script type="text/javascript"> 
function G(id){ 
return document.getElementByIdx_x(id); 
} 
function addEvent(obj, ev, handler){ 
if(window.attachEvent){ 
obj.attachEvent("on" + ev, handler); 
}else if(window.addEventListener){ 
obj.addEventListener(ev, handler, false); 
} 
} 
function test(e){ 
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); 
} 
var outer = G("outer"); 
var inner = G("inner"); 
//addEvent(inner, "click", test); 
addEvent(outer, "click", test); 
</script> 
在outer上点击时,target跟currentTarget是一样的,都是div,而在inner上点击时,e.target是p、e.currentTarget是div

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值