e.target與e.currentTarget對象的使用區(qū)別詳解
背景
大家開發(fā)中經(jīng)常會跟DOM的事件打交道，也會經(jīng)常用到e.target和e.currentTarget這兩個對象，但是卻有很多人根本就不知道這兩個有什么區(qū)別~~~
冒泡 & 捕獲
當(dāng)你觸發(fā)一個元素的事件的時候，該事件從該元素的祖先元素傳遞下去，此過程為捕獲，而到達(dá)此元素之后，又會向其祖先元素傳播上去，此過程為冒泡
<div id="a">
<div id="b">
<div id="c">
<div id="d">哈哈哈哈哈</div>
</div>
</div>
</div>
addEventListener
addEventListener是為元素綁定事件的方法，他接收三個參數(shù)：
第一個參數(shù)：綁定的事件名
第二個參數(shù)：執(zhí)行的函數(shù)
第三個參數(shù)：
- false：默認(rèn)，代表冒泡時綁定
- true：代表捕獲時綁定
target & currentTarget
false
我們給四個div元素綁定事件，且addEventListener第三個參數(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)在我們點擊，看看輸出的東西，可以看出觸發(fā)的是d，而執(zhí)行的元素是冒泡的順序
target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a
true
我們把四個事件第三個參數(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對象的使用區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于e.target與e.currentTarget區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了js實現(xiàn)4個方向滾動球的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了ES6實現(xiàn)圖片切換特效代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
IE8 內(nèi)存泄露(內(nèi)存一直增長 )的原因及解決辦法
最近開發(fā)的時候?qū)撁媸褂昧硕〞r的局部更新，結(jié)果在ie6，7和Firefox下，一切正常，而在ie8下過上幾個小時就瀏覽器就崩潰了，顯示是內(nèi)存溢出，下面由腳本之家小編給大家介紹ie8下內(nèi)存一直增長內(nèi)存泄漏的原因及解決辦法，需要的朋友一起學(xué)習(xí)吧2016-04-04
這篇文章主要給大家介紹了使用canvas實現(xiàn)鯉魚躍龍門的動畫效果,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下2024-02-02
本文主要介紹了詳解javascript如何在跨域請求中攜帶cookie，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
學(xué)習(xí)javascript面向?qū)ο?實例講解面向?qū)ο筮x項卡
這篇文章主要介紹了面向?qū)ο筮x項卡實現(xiàn)方法，幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript實現(xiàn)的圓形浮動標(biāo)簽云效果實例
這篇文章主要介紹了JavaScript實現(xiàn)的圓形浮動標(biāo)簽云效果,涉及javascript字符串與數(shù)組的遍歷、排序操作以及元素樣式動態(tài)操作與數(shù)學(xué)運(yùn)算等相關(guān)技巧,是非常實用的一段代碼,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了ckeditor一鍵排版功能實現(xiàn)方法,結(jié)合實例形式分析了ckeditor一鍵排版相關(guān)擴(kuò)展插件定義、配置與使用方法,需要的朋友可以參考下2020-02-02
這篇文章主要幫助大家快速解決js開發(fā)下拉框中blur與click沖突,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
js實現(xiàn)簡單省市區(qū)三級選擇聯(lián)級
這篇文章主要介紹了js實現(xiàn)簡單省市區(qū)三級選擇聯(lián)級，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04