DOM事件中target和currentTarget的区别

target和currentTarget的概念:

1、target和currentTarget都是事件对象中的属性
2、target是指获取事件的目标。
3、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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,556评论 1 11
  • 在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两...
    plainnany阅读 57,482评论 5 55
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 848评论 0 3
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,193评论 0 21
  • 这两天去面试的两个小伙伴都遇到了一个问题,面试官问到你用jQuery的时候有没有用过target和currentT...
    锋享前端阅读 861评论 0 0