DOM事件中target和currentTarget的區(qū)別

target和currentTarget的概念:

1、target和currentTarget都是事件對象中的屬性
2、target是指獲取事件的目標。
3、currentTarget是指其事件處理程序當前正在處理事件的那個元素

this和currentTarget的關系:

在事件處理程序內(nèi)部,對象this始終等于currentTarget的值。

什么情況下target和currentTarget會相等?什么時候不相等呢?
  • 相等的時候

當事件處理程序直接綁定在目標元素上,此時e.target===e.currentTarget,e.target ===this

  • 不相等的時候

當事件處理程序綁定在目標元素的父節(jié)點上時,currentTarget會指向綁定的父元素,而target依舊指向目標元素apple

<body>
       <ul id="box">
           <Li id="apple">蘋果</Li>
           <li>香蕉</li>
           <li>桃子</li>
       </ul>
</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    var apple = document.getElementById('apple');

    //直接綁定在目標元素apple上
    apple.onclick = function (e){  
        console.log(e.target);          //<li id="apple">蘋果</li>
        console.log(e.currentTarget);    //<li id="apple">蘋果</li>
        console.log(this);               //<li id="apple">蘋果</li>
        console.log(e.target === e.currentTarget);      //true
        console.log(e.target === this);           //true
    } 

   //綁定在apple的父元素box上
    box.onclick = function (e){
        console.log(e.target);           // <li id="apple">蘋果</li>
        console.log(e.currentTarget);       //<ul id="box">...</ul>
        console.log(this);                  //<ul id="box">...</ul>
        console.log(e.currentTarget===this);      //true
        console.log(e.target === e.currentTarget);        //false
        console.log(e.target === this);           //false
    }
   
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

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

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,530評論 1 11
  • 在DOM事件對象中有兩個屬性總是時不時的困擾我,就是target和currentTarget,有時候很迷惑分不清兩...
    plainnany閱讀 57,429評論 5 55
  • 事件流 JavaScript與HTML之間的交互是通過事件實現(xiàn)的。事件,就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互...
    DHFE閱讀 847評論 0 3
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,156評論 0 21
  • 這兩天去面試的兩個小伙伴都遇到了一個問題,面試官問到你用jQuery的時候有沒有用過target和currentT...
    鋒享前端閱讀 856評論 0 0