• event.target返回觸發事件的元素
• event.currentTarget返回繫結事件的元素

冒泡和捕獲

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

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

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

<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

target:d&currentTarget:a
target:d&currentTarget:b
target:d&currentTarget:c
target:d&currentTarget:d