DOM事件中target和currentTarget的区别

DOM事件中target和currentTarget的区别

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

  • currentTarget是事件绑定的元素

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

  • currentTarget和target，有时候是同一个元素，有时候不是同一个元素 （因为事件冒泡）

    • 当事件是子元素触发时，currentTarget为绑定事件的元素，target为子元素
    • 当事件是元素自身触发时，currentTarget和target为同一个元素。
<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>
posted @ 2020-01-19 13:29  _Jarrett  阅读(5385)  评论(1)  编辑  收藏  举报