首页 > 其他 > 详细

DOM事件中target和currentTarget的区别

时间:2020-01-19 14:34:16      阅读:62      评论:0      收藏:0      [点我收藏+]

DOM事件中targetcurrentTarget的区别

  • target是事件触发的真实元素

  • currentTarget是事件绑定的元素

  • 事件处理函数中的this指向是中为currentTarget

  • currentTargettarget,有时候是同一个元素,有时候不是同一个元素 (因为事件冒泡)

    • 当事件是子元素触发时,currentTarget为绑定事件的元素,target为子元素
    • 当事件是元素自身触发时,currentTargettarget为同一个元素。
<body>
   <ul id="box">
       <Li id="apple">苹果</Li>
       <li>香蕉</li>
       <li>桃子</li>
   </ul>
</body>
<script type="text/javascript">
   var box = document.getElementById('box');
   var apple = document.getElementById('apple');

   //直接绑定在目标元素apple上
   apple.onclick = function (e){  
       console.log(e.target);          //<li id="apple">苹果</li>
       console.log(e.currentTarget);    //<li id="apple">苹果</li>
       console.log(this);               //<li id="apple">苹果</li>
       console.log(e.target === e.currentTarget);      //true
       console.log(e.target === this);           //true
   } 

  //绑定在父元素box上(如果点击apple这个li时)
   box.onclick = function (e){
       console.log(e.target);           // <li id="apple">苹果</li>
       console.log(e.currentTarget);       //<ul id="box">...</ul>
       console.log(this);                  //<ul id="box">...</ul>
       console.log(e.currentTarget===this);      //true
       console.log(e.target === e.currentTarget);        //false
       console.log(e.target === this);           //false
   }

</script>

DOM事件中target和currentTarget的区别

原文:https://www.cnblogs.com/guojbing/p/12213332.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!