背景

大家開發(fā)中經(jīng)常會(huì)跟DOM的事件打交道，也會(huì)經(jīng)常用到e.target和e.currentTarget這兩個(gè)對(duì)象，但是卻有很多人根本就不知道這兩個(gè)有什么區(qū)別~~~

冒泡 & 捕獲

當(dāng)你觸發(fā)一個(gè)元素的事件的時(shí)候，該事件從該元素的祖先元素傳遞下去，此過程為捕獲，而到達(dá)此元素之后，又會(huì)向其祖先元素傳播上去，此過程為冒泡

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

addEventListener

addEventListener是為元素綁定事件的方法，他接收三個(gè)參數(shù)：

第一個(gè)參數(shù)：綁定的事件名

第二個(gè)參數(shù)：執(zhí)行的函數(shù)

第三個(gè)參數(shù)：

• false：默認(rèn)，代表冒泡時(shí)綁定
• true：代表捕獲時(shí)綁定

target & currentTarget

false

我們給四個(gè)div元素綁定事件，且addEventListener第三個(gè)參數(shù)不設(shè)置，則默認(rèn)設(shè)置為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}`)
})

現(xiàn)在我們點(diǎn)擊，看看輸出的東西，可以看出觸發(fā)的是d，而執(zhí)行的元素是冒泡的順序

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

true

我們把四個(gè)事件第三個(gè)參數(shù)都設(shè)置為true，我們看看輸出結(jié)果，可以看出觸發(fā)的是d，而執(zhí)行的元素是捕獲的順序

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

區(qū)別

我們可以總結(jié)出：

e.target：觸發(fā)事件的元素

e.currentTarget：綁定事件的元素

以上就是e.target與e.currentTarget對(duì)象的使用區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于e.target與e.currentTarget區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論