e.target與e.currentTarget物件的使用區別詳解

2022-07-04 18:00:41

背景

大家開發中經常會跟DOM的事件打交道，也會經常用到e.target和e.currentTarget這兩個物件，但是卻有很多人根本就不知道這兩個有什麼區別~~~

冒泡 & 捕獲

當你觸發一個元素的事件的時候，該事件從該元素的祖先元素傳遞下去，此過程為捕獲，而到達此元素之後，又會向其祖先元素傳播上去，此過程為冒泡

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

addEventListener

addEventListener是為元素繫結事件的方法，他接收三個引數：

第一個引數：繫結的事件名

第二個引數：執行的函數

第三個引數：

false：預設，代表冒泡時繫結
true：代表捕獲時繫結

target & currentTarget

false

我們給四個div元素繫結事件，且addEventListener第三個引數不設定，則預設設定為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) => {
  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，而執行的元素是冒泡的順序