target与currentTarget的区别

最新推荐文章于 2023-07-07 22:58:47 发布

Lei_zhen96

最新推荐文章于 2023-07-07 22:58:47 发布

阅读量1.8k

点赞数

MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。
举个例子来说明。

事件冒泡阶段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>
  <script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    ul.addEventListener('click',function(e){
       let oLi1 = e.target  
       let oLi2 = e.currentTarget
        console.log(oLi1)   //  被点击的li
        console.log(oLi2)   // ul
        console.og(oLi1===oLi2)  // false
    })
  </script>
</body>
</html>

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

作者：plainnany
链接：https://www.jianshu.com/p/1dd668ccc97a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lei_zhen96

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
target与currentTarget的区别

MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。举个例子来说明。事件冒泡阶段&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;...
复制链接

扫一扫