在DOM事件對(duì)象中有兩個(gè)屬性總是時(shí)不時(shí)的困擾我，就是target和currentTarget，有時(shí)候很迷惑分不清兩者的區(qū)別，因此有必要把這兩個(gè)屬性好好梳理一下，加深理解，以便日后的查詢。
MDN中對(duì)target的解釋為，一個(gè)觸發(fā)事件的對(duì)象的引用， 當(dāng)事件處理程序在事件的冒泡或捕獲階段被調(diào)用時(shí)。
而對(duì)于currentTarget，它指的是當(dāng)事件遍歷DOM時(shí)，標(biāo)識(shí)事件的當(dāng)前目標(biāo)。它總是引用事件處理程序附加到的元素，而不是event.target，它標(biāo)識(shí)事件發(fā)生的元素。
舉個(gè)例子來(lái)說(shuō)明。
<!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可以用來(lái)實(shí)現(xiàn)事件委托，該原理是通過(guò)事件冒泡（或者事件捕獲）給父元素添加事件監(jiān)聽，e.target指向引發(fā)觸發(fā)事件的元素，如上述的例子中，e.target指向用戶點(diǎn)擊的li，由于事件冒泡，li的點(diǎn)擊事件冒泡到了ul上，通過(guò)給ul添加監(jiān)聽事件而達(dá)到了給每一個(gè)li添加監(jiān)聽事件的效果，而e.currentTarget指向的是給綁定事件監(jiān)聽的那個(gè)對(duì)象，即ul，從這里可以發(fā)現(xiàn)，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。
