首先本質(zhì)區(qū)別是：
event.target返回觸發(fā)事件的元素
event.currentTarget返回綁定事件的元素
我們?yōu)橐粋€(gè)元素綁定一個(gè)點(diǎn)擊事件的時(shí)候唆垃，可以指定是要在捕獲階段綁定或者換在冒泡階段綁定。 當(dāng)addEventListener的第三個(gè)參數(shù)為true的時(shí)候单料，代表是在捕獲階段綁定阱持，當(dāng)?shù)谌齻€(gè)參數(shù)為false或者為空的時(shí)候缚甩，代表在冒泡階段綁定。
知道事件有這么一個(gè)穿透的過程之后，結(jié)合下面的例子羡微，就可以很好來理解event.target和event.currentTarget：
? ? document.getElementById('a').addEventListener('click', function(e) {
<div id="a">
? ? <div id="b">
? ? ? <div id="c">
? ? ? ? <div id="d"></div>
? ? ? </div>
? ? </div>
</div>
<script>
? ? document.getElementById('a').addEventListener('click', function(e) {
? ? ? console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
? ? });? ?
? ? document.getElementById('b').addEventListener('click', function(e) {
? ? ? console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
? ? });? ?
? ? document.getElementById('c').addEventListener('click', function(e) {
? ? ? console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
? ? });? ?
? ? document.getElementById('d').addEventListener('click', function(e) {
? ? ? console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);
? ? });
</script>
上面事件的綁定都是在冒泡階段的傻唾，當(dāng)我們點(diǎn)擊最里層的元素d的時(shí)候投慈，會(huì)依次輸出:
target:d¤tTarget:d
target:d¤tTarget:c
target:d¤tTarget:b
target:d¤tTarget:a
從輸出中我們可以看到，event.target指向引起觸發(fā)事件的元素冠骄，而event.currentTarget則是事件綁定的元素伪煤，只有被點(diǎn)擊的那個(gè)目標(biāo)元素的event.target才會(huì)等于event.currentTarget。
如果我們把事件都綁定在捕獲階段凛辣，然后還是點(diǎn)擊最里層的元素d抱既，這時(shí)event.target還依舊會(huì)指向d，因?yàn)槟鞘且鹗录|發(fā)的元素扁誓，因?yàn)閑vent.currentTaget指向事件綁定的元素防泵，所以在捕獲階段，最先來到的元素是a,然后是b,接著是c,最后是d蝗敢。所以輸出的內(nèi)容如下：
target:d¤tTarget:a
target:d¤tTarget:b
target:d¤tTarget:c
target:d¤tTarget:d
