首先本質(zhì)區(qū)別是：

event.target返回觸發(fā)事件的元素

event.currentTarget返回綁定事件的元素

事件捕獲

事件冒泡

我們?yōu)橐粋€元素綁定一個點(diǎn)擊事件的時候，可以指定是要在捕獲階段綁定或者換在冒泡階段綁定。 當(dāng)addEventListener的第三個參數(shù)為true的時候，代表是在捕獲階段綁定，當(dāng)?shù)谌齻€參數(shù)為false或者為空的時候，代表在冒泡階段綁定。

知道事件有這么一個穿透的過程之后，結(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 + '&currentTarget:' + e.currentTarget.id);

? ? });? ?

? ? document.getElementById('b').addEventListener('click', function(e) {

? ? ? console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);

? ? });? ?

? ? document.getElementById('c').addEventListener('click', function(e) {

? ? ? console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);

? ? });? ?

? ? document.getElementById('d').addEventListener('click', function(e) {

? ? ? console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);

? ? });

</script>

上面事件的綁定都是在冒泡階段的，當(dāng)我們點(diǎn)擊最里層的元素d的時候，會依次輸出:

target:d&currentTarget:d

target:d&currentTarget:c

target:d&currentTarget:b

target:d&currentTarget:a

從輸出中我們可以看到，event.target指向引起觸發(fā)事件的元素，而event.currentTarget則是事件綁定的元素，只有被點(diǎn)擊的那個目標(biāo)元素的event.target才會等于event.currentTarget。

如果我們把事件都綁定在捕獲階段，然后還是點(diǎn)擊最里層的元素d，這時event.target還依舊會指向d，因?yàn)槟鞘且鹗录|發(fā)的元素，因?yàn)閑vent.currentTaget指向事件綁定的元素，所以在捕獲階段，最先來到的元素是a,然后是b,接著是c,最后是d。所以輸出的內(nèi)容如下：

target:d&currentTarget:a

target:d&currentTarget:b

target:d&currentTarget:c

target:d&currentTarget:d