currentTarget VS target

時間 2019-11-17

標籤 currenttarget target 简体版

原文原文鏈接

target在事件流的目標階段；javascript

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

target指向被單擊的對象java

currentTarget指向當前事件活動的對象（通常爲父級）。ui

冒泡和捕獲

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

事件捕獲

事件冒泡

咱們爲一個元素綁定一個點擊事件的時候，能夠指定是要在捕獲階段綁定或者換在冒泡階段綁定。當addEventListener的第三個參數爲true的時候，表明是在捕獲階段綁定，當第三個參數爲false或者爲空的時候，表明在冒泡階段綁定。code

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

<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>
複製代碼

處於冒泡階段htm

//點擊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。因此輸出的內容以下：blog

處於捕獲階段

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。