为什么控制台打印事件对象e时里面的currentTarget为null，而打印e.currentTarget时为DOM对象？

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

润清

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

阅读量2.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端业务实际问题文章标签： currentTarget 控制台打印 null

本文链接：https://blog.youkuaiyun.com/qq_39852145/article/details/92659262

前端业务实际问题专栏收录该内容

16 篇文章

订阅专栏

博客主要探讨了currentTarget在事件处理中的情况。点击操作时会出现特定打印结果，原因是currentTarget只能用于事件处理过程中，回调结束会被重新赋值。使用异步能明显看到这一现象，读取其属性时若事件处理结束就会被赋为null。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>currentTarget</title>
</head>
<body>
  <ul id='container' onclick="handleClick(event)">
    <li id='first'>1</li>
    <li id='second'>2</li>
    <li id='third'>3</li>
  </ul>
  <script>
    function handleClick (ev) {
      console.log(ev)
      console.log(ev.currentTarget)
    }
  </script>
</body>
</html>

例如，点击2时，打印结果分别为：
在这里插入图片描述

为什么会出现这种现象呢？
这是因为currentTarget 只能用于事件正在处理过程中，当回调结束，会被重新赋值。
用异步可以明显看到这一现象：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>currentTarget</title>
</head>
<body>
  <ul id='container' onclick="handleClick(event)">
    <li id='first'>1</li>
    <li id='second'>2</li>
    <li id='third'>3</li>
  </ul>
  <script>
    let e
    function handleClick (ev) {
      console.log('ev1', ev)
      console.log('currentTarget1', ev.currentTarget)
      e = ev
      setTimeout(function () {
        console.log('ev2', e)
        console.log('currentTarget2', e.currentTarget)
      },100)
    }  
  </script>
</body>
</html>