targets和currentTargets的区别

100 阅读1分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第4篇文章,[点击查看活动详情] (s.juejin.cn/ds/jooSN7t "s.juejin.cn/ds/jooSN7t"…

target在事件流的目标阶段

currentTarget在事件流的捕获,目标及冒泡阶段。

当事件流处在目标阶段的时候,两个的指向才是一样的,

当处于捕获和冒泡阶段的时候,target指向被单击的对象;currentTarget指向当前事件活动的对象(一般为父级)。

通常情况下,target与currentTarget是一致的,但当出现父子嵌套时,target与currentTarget就有差别了!

在父子嵌套的关系中:

target触发事件源(点击谁,触发谁,当点击父元素时也不会包含子元素)

currentTarget触发的是绑定事件的标签(如果点击对象还有子节点,当前事件包括子节点在内)

  <div ref="app1">
    <div ref="app2"> 点我啊!! </div>
  </div>
  
  <script type="text/javascript">
    let app1 = this.$refs.app1,
        app2 = this.$refs.app2;
        
    app1.addEventListener('click', e => {
      console.log('e.target结果是:', e.target)
      //  <div ref="app2">点我啊!!</div>

      
      console.log('e.currentTarget结果是:', e.currentTarget)
        // <div ref="app1">
        //    <div ref="app2">点我啊!! </div>
        //  </div>
    })
  </script>