大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心
前端之神
一位前端小菜雞,寫過100多篇原創(chuàng)文章,全網(wǎng)有5w+個前端朋友,夢想是成為”前端之神“~
261篇原創(chuàng)內容
公眾號
大家開發(fā)中經(jīng)常會跟DOM的事件打交道,也會經(jīng)常用到e.target
和e.currentTarget
這兩個對象,但是卻有很多人根本就不知道這兩個有什么區(qū)別~~~
當你觸發(fā)一個元素的事件的時候,該事件從該元素的祖先元素傳遞下去,此過程為捕獲
,而到達此元素之后,又會向其祖先元素傳播上去,此過程為冒泡
<div id="a"> <div id="b"> <div id="c"> <div id="d">哈哈哈哈哈</div> </div> </div> </div>
addEventListener
是為元素綁定事件的方法,他接收三個參數(shù):
我們給四個div元素綁定事件,且addEventListener
第三個參數(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是dtarget是d currentTarget是ctarget是d currentTarget是btarget是d currentTarget是a
我們把四個事件第三個參數(shù)都設置為true
,我們看看輸出結果,可以看出觸發(fā)的是d,而執(zhí)行的元素是捕獲的順序
target是d currentTarget是atarget是d currentTarget是btarget是d currentTarget是ctarget是d currentTarget是d
我們可以總結出:
e.target
:觸發(fā)事件的元素e.currentTarget
:綁定事件的元素本文鏈接:http://www.www897cc.com/showinfo-26-81247-0.htmle.target 和 e.currentTarget 的區(qū)別?你到底知不知道?
聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com