target 与 currentTarget 的区别

问题

e.target 和 e.currentTarget 有什么区别？

解答

事件传播机制

当触发一个元素的事件时，事件会经历两个阶段：

1. 捕获阶段：事件从祖先元素向下传递到目标元素
2. 冒泡阶段：事件从目标元素向上传递到祖先元素

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

addEventListener 参数

addEventListener 接收三个参数：

• 第一个参数：事件名称
• 第二个参数：事件处理函数
• 第三个参数：false（默认，冒泡阶段触发）或 true（捕获阶段触发）

冒泡阶段示例（第三个参数为 false）

const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')

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

b.addEventListener('click', (e) => {
  console.log(`target是${e.target.id} currentTarget是${e.currentTarget.id}`)
}, false)

c.addEventListener('click', (e) => {
  console.log(`target是${e.target.id} currentTarget是${e.currentTarget.id}`)
}, false)

d.addEventListener('click', (e) => {
  console.log(`target是${e.target.id} currentTarget是${e.currentTarget.id}`)
}, false)

点击 d 元素，输出结果：

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

捕获阶段示例（第三个参数为 true）

将上述代码的第三个参数改为 true，点击 d 元素，输出结果：

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

关键点

• e.target 是触发事件的元素（实际被点击的元素）
• e.currentTarget 是绑定事件的元素（当前正在执行事件处理函数的元素）
• 在事件传播过程中，target 始终不变，currentTarget 会随着事件流动而改变
• 捕获阶段从外到内，冒泡阶段从内到外