关于event.target和event.currentTarget

Dark_programmer

于 2021-03-17 16:35:16 发布

阅读量337

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Dark_programmer/article/details/114936189

版权

js 专栏收录该内容

48 篇文章

订阅专栏

本文通过一个具体的示例说明了在JavaScript事件处理中event.target与event.currentTarget的区别。前者指向触发事件的元素，后者则是绑定事件处理函数的元素。

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

event.target和 event.currentTarget既然写法不一样，那么肯定用途也是有着区别。

一个简单的栗子：

<div class="a_div" @click="clickHandle">
   a标签
   <div class="b_div">b标签</div>
</div>

.a_div {
  width: 300px;
  height: 300px;
  background-color: chocolate;
  .b_div {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
  }
}

clickHandle(e) {
      console.log(e.target, e.currentTarget);
    }

在栗子中，事件绑定是在A标签

那么，点击A标签和点击B标签，会有什么不一样的吗？

点击A标签：
在这里插入图片描述

点击B标签：
在这里插入图片描述

对比之下，清晰可见。e.target代表的是触发事件的元素，而e.currentTarget代表的是那个绑定了事件处理函数的元素