MDN 中對 target的解釋為：一個(gè)觸發(fā)事件的對象的引用耻台，當(dāng)事件處理程序在事件的冒泡或捕獲階段被調(diào)用時(shí)徙歼。
對于 currentTarget的解釋為：當(dāng)事件遍歷DOM時(shí)，標(biāo)識(shí)事件的當(dāng)前目標(biāo)。它總是引用事件處理程序附加到的元素，而不是event.target，它標(biāo)識(shí)事件發(fā)生的元素存皂。
舉個(gè)例子來說明：
事件冒泡階段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
<li>hello 4</li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
ul.addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被點(diǎn)擊的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
</script>
</body>
</html>
我們知道晌坤，e.target可以用來實(shí)現(xiàn)事件委托，該原理是通過事件冒泡（或者事件捕獲）給父元素添加事件監(jiān)聽旦袋，e.target指向引發(fā)觸發(fā)事件的元素骤菠，如上述的例子中，e.target指向用戶點(diǎn)擊的li疤孕，由于事件冒泡商乎，li的點(diǎn)擊事件冒泡到ul上，通過ul添加監(jiān)聽事件而達(dá)到了給每一個(gè)li添加監(jiān)聽事件的效果祭阀，而e.currentTarget指向的是給綁定事件監(jiān)聽的那個(gè)對象鹉戚，即ul，從這里可以發(fā)現(xiàn)专控，e.currentTarget===this返回true抹凳，而e.target===this返回false。所以e.targe和e.currentTarget是不相等的伦腐。
注意：在jq提供的on方法中赢底，e.currentTarget與該方法接收的第二個(gè)參數(shù)有關(guān)，根據(jù)jq的文檔描述
如果省略
selector或者是null柏蘑，那么事件處理程序被稱為直接事件或者直接綁定事件幸冻。每次選中的元素觸發(fā)事件時(shí)，就會(huì)執(zhí)行處理程序咳焚，不管它直接綁定在元素上洽损，還是從后代（內(nèi)部）元素冒泡到該元素的。
當(dāng)提供了selector參數(shù)是革半，事件處理程序是指委派事件（事件委托或事件代理）趁啸。事件不會(huì)在直接綁定的元素上觸發(fā)强缘。jq會(huì)從 event target 開始向上層元素（例如，由最內(nèi)層元素到最外層元素）開始冒泡不傅，并且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器旅掂，那么這些元素上的事件也會(huì)被觸發(fā)。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
li{
padding: 5px;
border: 1px solid red;
}
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
$('ul').on('click','li',function(e){
console.log(e.target) // 被點(diǎn)擊的元素
console.log(e.currentTarget) // li
console.log(e.currentTarget === this) // true
})
</script>
</body>
</html>
當(dāng)li元素中含有自元素的時(shí)候访娶，e.target指的是觸發(fā)事件的元素商虐，可能是spsn也可能是li，此時(shí)的e.tcurrentTarget指的是selector那個(gè)參數(shù)崖疤，也就是本例中的li秘车。如果省略selector參數(shù)，那么它和addEventListener中的e.target和e.currentTarget是一致的劫哼。
事件目標(biāo)階段
在DOM事件流中分為幾個(gè)不同的階段叮趴，如圖所示：
上述例子中是事件冒泡階段，
e.currentTarget和e.target是不相等的权烧，但是在事件的目標(biāo)階段眯亦，e.currentTarget和e.target是相等的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
<li>hello 4</li>
</ul>
<script>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
for(let i=0;i<aLi.length;i++){
aLi[i].addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // li
console.log(oLi2) // li
console.og(oLi1===oLi2) // true
})
}
</script>
</body>
</html>
在本例中般码，事件的目標(biāo)階段li妻率，由于e.currentTarget始終指向添加監(jiān)聽事件的那個(gè)對象，即aLi[i]板祝，也就是HTML中的li宫静，而e.target指向觸發(fā)事件監(jiān)聽的那個(gè)對象，也是li券时，因此e.target和e.currentTarget相等孤里，同時(shí)也和this相等。
總結(jié)
-
e.target指向觸發(fā)事件監(jiān)聽的對象橘洞。 -
e.currentTarget指向添加監(jiān)聽事件的對象扭粱。
