DOM事件中target和currentTarget的区别

最新推荐文章于 2022-11-09 21:00:56 发布

hmily43

最新推荐文章于 2022-11-09 21:00:56 发布

阅读量596

点赞数

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

版权

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>

hmily43

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM事件中target和currentTarget的区别

target是事件触发的真实元素 currentTarget是事件绑定的元素事件处理函数中的this指向是中为currentTarget currentTarget和target，有时候是同一个元素，有时候不是同一个元素（因为事件冒泡）当事件是子元素触发时，currentTarget为绑定事件的元素，target为子元素当事件是元素自身触发时，currentTarget和target为同一个元素。 <body> <ul id="..
复制链接

扫一扫