JS 中 event.target 与 event.currentTarget 的区别

最新推荐文章于 2022-11-08 13:31:54 发布

yanzi_0216

最新推荐文章于 2022-11-08 13:31:54 发布

阅读量319

点赞数

分类专栏： JavaScript 文章标签： js 前端

本文链接：https://blog.csdn.net/yanzi_0216/article/details/113484916

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS 中 event.target 与 event.currentTarget 的区别

event.target 返回触发事件的元素（在点击事件中，就相当于被你点击的那个元素对象）
event.currentTarget 返回绑定事件的元素，即事件的委托对象（绑定了事件处理函数的元素）

<!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>

yanzi_0216

关注

0
点赞
踩
0

收藏

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

JS 中 event.target 与 event.currentTarget 的区别event.target 返回触发事件的元素（在点击事件中，就相当于被你点击的那个元素对象）event.currentTarget 返回绑定事件的元素，即事件的委托对象（绑定了事件处理函数的元素）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</titl
复制链接

扫一扫