event.target 和 event.currentTarget

先上圖：

1. 當點擊對象與事件監聽對象是同一個時，event.target 和 event.currentTarget 獲得的是同一個對象

在紅色區域的div綁定點擊事件的監聽，點擊紅色區域，此時，event.target 指的是當前點擊的對象，即紅色div的DOM對象，而event.currentTarget指得是點擊事件綁定的對象，也是紅色區域的div

<div id="outer">
    <div id="inner">123</br>333</div>
</div>

<script>
    document.getElementById('inner').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)     //<div id="inner">...</div>
    }
</script>

2. 當點擊對象與事件監聽對象不是同一個時，event.target 和 event.currentTarget 獲得的不是同一個對象

在外層的div綁定點擊事件的監聽，點擊紅色區域，此時，event.target 指的是當前點擊的對象，即紅色div的DOM對象，而event.currentTarget指得是點擊事件綁定的對象，即外層div

代碼：

<div id="outer">
    <div id="inner">123</br>333</div>
</div>

<script>
    document.getElementById('outer').onclick = function(e){
        console.info('e.target',e.target)            //<div id="inner">...</div>
        console.info('e.currentTarget',e.currentTarget)//<div id="outer">...</div>
    }
</script>