event.target

This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

event.currentTarget

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

讀定義總是很繞，要徹底瞭解這兩者的區別，我們要先了解瀏覽器中事件傳遞的機制冒泡和捕獲。

冒泡和捕獲

在頁面中點選一個元素，事件是從這個元素的祖先元素中逐層傳遞下來的，這個階段為事件的捕獲階段。當事件傳遞到這個元素之後，又會把事件逐成傳遞回去，直到根元素為止，這個階段是事件的冒泡階段。

 

我們為一個元素繫結一個點選事件的時候，可以指定是要在捕獲階段繫結或者換在冒泡階段繫結。 當addEventListener的第三個引數為true的時候，代表是在捕獲階段繫結，當第三個引數為false或者為空的時候，代表在冒泡階段繫結。

知道事件有這麼一個穿透的過程之後，結合下面的例子，就可以很好來理解event.target和event.currentTarget：

<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的時候，會依次輸出:

target:d&currentTarget:d

target:d&currentTarget:c

target:d&currentTarget:b

target:d&currentTarget:a

從輸出中我們可以看到，event.target指向引起觸發事件的元素，而event.currentTarget則是事件繫結的元素，只有被點選的那個目標元素的event.target才會等於event.currentTarget。

如果我們把事件都繫結在捕獲階段，然後還是點選最裡層的元素d，這時event.target還依舊會指向d，因為那是引起事件觸發的元素，因為event.currentTaget指向事件繫結的元素，所以在捕獲階段，最先來到的元素是a,然後是b,接著是c,最後是d。所以輸出的內容如下：

target:d&currentTarget:a

target:d&currentTarget:b

target:d&currentTarget:c

target:d&currentTarget:d

JS