DOM事件中target和currentTarget的区别

最新推荐文章于 2025-04-24 17:46:29 发布

玉米_欣

最新推荐文章于 2025-04-24 17:46:29 发布

阅读量452

点赞数

分类专栏：前端 js H5 文章标签： dom javascript

原文链接：https://www.cnblogs.com/guojiabing/p/12213332.html

版权

前端同时被 3 个专栏收录

49 篇文章

订阅专栏

21 篇文章

订阅专栏

7 篇文章

订阅专栏

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>