event.target 和 event.currentTarget 的區別

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