target与currentTarget的区别

最新推荐文章于 2022-10-12 17:01:45 发布

原创最新推荐文章于 2022-10-12 17:01:45 发布 · 550 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#target与currentTarget的区别

事件流专栏收录该内容

2 篇文章

订阅专栏

本文通过一个简单的示例介绍了在JavaScript事件处理过程中，target与currentTarget的区别。target指的是事件最初触发的元素，而currentTarget则指的是当前正在处理事件的元素，这在事件冒泡机制中有重要意义。

通常情况下，target与currentTarget是一致的，但当出现父子嵌套时，target与currentTarget就有差别了！

在父子嵌套的关系中：

target触发事件源（点击谁，触发谁，当点击父元素时也不会包含子元素）

currentTarget触发的是绑定事件的标签（如果点击对象还有子节点，当前事件包括子节点在内）

<body>
  <div id="app1">
    <div id="app2">
      点我啊！！
    </div>
  </div>
  <script type="text/javascript">
    let app1 = document.getElementById('app1'),
      app2 = document.getElementById('app2');
    app1.addEventListener('click', e => {
      console.log('e.target结果是：', e.target)
      console.log('e.currentTarget结果是：', e.currentTarget)
    })
  </script>
</body>