event.target 和 event.currentTarget

子龙
• 阅读 3286

先上图:
event.target  和  event.currentTarget

1. 当点击对象与事件监听对象是同一个时,event.target 和 event.currentTarget 得到的是同一个对象

在红色区域的div绑定点击事件的监听,点击红色区域,此时,event.target 指的是当前点击的对象,即红色div的DOM对象,而event.currentTarget指得是点击事件绑定的对象,也是红色区域的div

<div id="outer">
    <div id="inner">123</br>333</div>
</div>
<script>
    document.getElementById('inner').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)     //<div id="inner">...</div>
    }
</script>

2. 当点击对象与事件监听对象不是同一个时,event.target 和 event.currentTarget 得到的不是同一个对象

在外层的div绑定点击事件的监听,点击红色区域,此时,event.target 指的是当前点击的对象,即红色div的DOM对象,而event.currentTarget指得是点击事件绑定的对象,即外层div

代码:

<div id="outer">
    <div id="inner">123</br>333</div>
</div>
<script>
    document.getElementById('outer').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)//<div id="outer">...</div>
    }
</script>
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
3年前
SpringBoot使用RedisTemplate操作Redis时,key值出现 -xac-xed-x00-x05t-x00-tb
原因分析原因与RedisTemplate源码中的默认序列化方式有关defaultSerializernewJdkSerializationRedisSerializer(classLoader!null?classLoader:this.getClass().getClassLoader()
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Easter79 Easter79
3年前
SpringBoot使用RedisTemplate操作Redis时,key值出现 -xac-xed-x00-x05t-x00-tb
原因分析原因与RedisTemplate源码中的默认序列化方式有关defaultSerializernewJdkSerializationRedisSerializer(classLoader!null?classLoader:this.getClass().getClassLoader()
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Stella981 Stella981
3年前
JavaScript事件属性event.target和currentTarget 属性的区别。
event.target获取的是触发事件的标签元素event.currentTarget获取到的是发起事件的标签元素一、事件属性:event.targettarget事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干例子1!(https://oscimg.oschina.n