currentTarget VS target

莫兮發表於2018-03-04

target在事件流的目標階段；

currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的， 而當處於捕獲和冒泡階段的時候，

target指向被單擊的物件

currentTarget指向當前事件活動的物件（一般為父級）。

冒泡和捕獲

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

事件捕獲

image

事件冒泡

image

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

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

<body>
    <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>
</body>
複製程式碼

處於冒泡階段

    //點選d元素的時候；
    target:d&currentTarget:d    // d觸發
    target:d&currentTarget:c    // c觸發
    target:d&currentTarget:b    // b觸發
    target:d&currentTarget:a    // a觸發
複製程式碼

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

將上述<script>標籤裡的事件繫結的第三個引數設定為true時，事件處於捕獲階段，然後還是點選最裡層的元素d，這時event.target還依舊會指向d，因為那是引起事件觸發的元素，因為event.currentTaget指向事件繫結的元素，所以在捕獲階段，最先來到的元素是a,然後是b,接著是c,最後是d。所以輸出的內容如下：

處於捕獲階段

    target:d&currentTarget:a    // a觸發
    target:d&currentTarget:b    // b觸發
    target:d&currentTarget:c    // c觸發
    target:d&currentTarget:d    // d觸發
複製程式碼

相關文章