e.target 和 e.currentTarget 的区别

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

我们给四个 div 绑定事件

const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')
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}`)
})
d.addEventListener('click', (e) => {
  const { target, currentTarget } = e
  console.log(`target是${target.id}`)
  console.log(`currentTarget是${currentTarget.id}`)
})

点击 d 元素，执行冒泡，依次打印

target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a

我们把四个事件的第三个参数都设置为 true（相当于把 capture 设置为 true），执行的是捕获阶段

target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d

我们可以总结出：

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