什么是 target 和 currentTarget ？

最新推荐文章于 2024-07-18 11:48:33 发布

五秒法则

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量190

点赞数 2

分类专栏：每日一问文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_51478745/article/details/139409820

版权

每日一问专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、event.target

发生事件的元素或触发事件的元素

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
  <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
      <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
        <button style="margin:10px">
            Button
        </button>
      </div>
  </div>
</div>
<script>
  function clickFunc(event) {
    console.log(event.target);
  }
</script>

点击 Button，即使将事件附加在最外面的 div 上，它也将打印 button 标签，因此 event.target 是触发事件的元素

2、event.currentTarget

在其上显式附加事件处理程序的元素

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
  <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
      <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
        <button style="margin:10px">
            Button
        </button>
      </div>
  </div>
</div>
<script>
function clickFunc(event) {
  console.log(event.currentTarget);
}
</script>