e.target 和 e.currentTarget 的区别

背景

最近在开发中遇到对DOM元素的操作，用到e.target和e.currentTarget这两个对象，但是却有点分不清楚。

冒泡和捕获

当用户操作触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡。
再此就要提到addEventListener，addEventListener是为元素绑定事件的方法，它接收三个参数：

第一个参数：绑定的事件名
第二个参数：执行的函数
第三个参数：
false：默认，代表冒泡时绑定
true：代表捕获时绑定

页面创建3个div元素，并绑定对应的id

<div id="a">
      <div id="b">
        <div id="c">
        	点击我
        </div>
      </div>
    </div>

我们给3个div元素绑定点击事件，且addEventListener第三个参数默认设置为false，就代表冒泡时绑定

const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
a.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target对应的是${target.id}`)
  console.log(`currentTarget对应是${currentTarget.id}`)
})
b.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target对应的是${target.id}`)
  console.log(`currentTarget对应的是${currentTarget.id}`)
})
c.addEventListener('click', (e) => {
  const {
    target,
    currentTarget
  } = e
  console.log(`target对应的是${target.id}`)
  console.log(`currentTarget对应的是${currentTarget.id}`)
})

打印出来的内容：
显而易见的冒泡捕获的顺序

target对应的是d currentTarget是c
target对应的是d currentTarget是b
target对应的是d currentTarget是a

反之设置addEventListener的第三个参数为true，则为捕获时绑定的顺序

target对应的是d currentTarget是a
target对应的是d currentTarget是b
target对应的是d currentTarget是c

收获

e.target：触发事件的元素
e.currentTarget：绑定事件的元素