e.target,e.currentTarget辨析

一、概述

事件監(jiān)聽中e有target和currentTarget兩個屬性,target只會出現(xiàn)在事件流目標(biāo)階段,currentTarget可能出現(xiàn)在事件流捕獲、目標(biāo)、冒泡中任一階段。

二、區(qū)分

e.target是觸發(fā)事件元素,e.currentTarget是事件監(jiān)聽元素,一般情況下兩者指向相同,事件委托時往往e.target指向子元素而e.currentTarget指向父元素。
?一般情況下:

<div id="div">
    <button id="button">按鈕</button>
</div>
<script>
     button.addEventListener("click",function(){
        console.log(e.target);//button
        console.log(e.currentTarget);//button
});
</script>

事件委托時:

<div id="div">
    <button id="button">按鈕</button>
</div>
<script>
     div.addEventListener("click",function(){
        console.log(e.target);//button
        console.log(e.currentTarget);//div
});
</script>

(DOM事件處理函數(shù)中this指向e.currentTarget)

JS事件:target與currentTarget區(qū)別
事件冒泡、事件捕獲和事件代理
target、this、currentTarget區(qū)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容