e.target 和 e.currentTarget 的区别？

原创已于 2022-09-01 16:51:45 修改 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css3

于 2017-08-01 14:47:09 首次发布

Javascript 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在Web开发中事件处理机制的核心概念——事件冒泡与捕获，并通过实例解释了如何使用addEventListener方法来区分这两种不同的事件传播方式。

当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡

在这里插入图片描述

   addEventListener 介绍

addEventListener是为元素绑定事件的方法，他接收三个参数：
第一个参数：绑定的事件名
第二个参数：执行的函数
第三个参数：
false：默认，代表冒泡时绑定
true：代表捕获时绑定

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d">xxxx</div>
    </div>
  </div>
</div>

 const a = document.getElementById('a');
 a.addEventListener('click',(e)=>{
   const {target, currentTarget} = e;
   console.log(`target是${target.id}`)
   console.log(`currentTarget是${currentTarget.id}`)
 }, false)

结论

我们可以总结出：
  e.target：触发事件的元素
  e.currentTarget：绑定事件的元素