首页 > 其他 > 详细

DOM事件中target和currentTarget的区别

时间:2020-09-06 23:31:41      阅读:63      评论:0      收藏:0      [点我收藏+]

target是指获取事件的目标

currentTarget是指其事件处理程序当前正在处理事件的那个元素

this和currentTarget的关系

在事件处理程序内部,对象this始终等于currentTarget的值。

在什么情况下target和currentTarget相等

当事件处理程序直接绑定在目标元素上,此时e.target===e.currentTarget,e.target ===this

不相等的时候

当事件处理程序绑定在目标元素的父节点上时,currentTarget会指向绑定的父元素,而target依旧指向目标元素apple

<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
    } 

   //绑定在apple的父元素box上
    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/laoli-boke/p/13623836.html

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