event.target 与 event.currentTarget 的区别

event.target指向引起触发事件的元素
event.currentTarget则是事件绑定的元素

看个例子

<style>
body {
  padding: 25px;
}
#outer {
  float: left;
  padding: 50px;
  margin: 0 0 25px;
  background-color: #086FA1;
}

#inner {
  width: 100px;
  height: 100px;
  background-color: #3CA0D0;
}

</style>
<div id="outer">
  <div id="inner"></div>
</div>
<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click',function (event){
       console.log('event.target.id:'+event.target.id);
       console.log('event.currentTarget.id:'+ event.currentTarget.id); 
    })
</script>

当点击里面的元素时,输出

event.target.id:inner
event.currentTarget.id:outer

当点击外面的元素时,输出

event.target.id:outer
event.currentTarget.id:outer

当事件绑定的元素和触发的元素相同时,event.target === event.event,currentTarget。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言:之前的上传图片用到了event.target,但是后来仔细思考了一下,自己对event.target,thi...
    Ruby君阅读 2,026评论 1 3
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,295评论 0 6
  • 在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两...
    plainnany阅读 57,417评论 5 55
  • "大爷,您是个卖水泥的,找了个大妈却这么漂亮,说说你和大妈的故事吧。" “我也不知道你大妈咋看上我的,那年情人节,...
    黄震阅读 152评论 0 0