這兩天去面試的兩個(gè)小伙伴都遇到了一個(gè)問題，面試官問到你用jQuery的時(shí)候有沒有用過target和currentTarget？他們的區(qū)別是什么？他們都是一臉懵，平時(shí)練習(xí)也沒有用過currentTarget??？其實(shí)currentTarget這個(gè)屬性很是雞肋，其實(shí)我們平時(shí)也用不到，下面我們通過兩個(gè)例子說明平時(shí)我們?yōu)槭裁从貌坏剑?/p>

舉個(gè)例子：

   <ul>
    <li>按鈕1</li>
    <li>按鈕2</li>
    <li>按鈕3</li>
    <li>按鈕4</li>
  </ul>

<script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    ul.addEventListener('click',function(e){
       let oLi1 = e.target  
       let oLi2 = e.currentTarget
       console.log(oLi1)   //  被點(diǎn)擊的li
       console.log(oLi2)   // ul
       console.og(oLi1===oLi2)  // false
    })
  </script>

我們知道，e.target可以用來實(shí)現(xiàn)事件委托，e.target指向用戶點(diǎn)擊的li，而e.currentTarget指向的是給綁定事件監(jiān)聽的那個(gè)對(duì)象，即ul，從這里可以發(fā)現(xiàn)，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。
總結(jié)：
上面的例子是：省略selector或者是null，那么事件處理程序被稱為直接事件 或者 直接綁定事件 。每次選中的元素觸發(fā)事件時(shí)，就會(huì)執(zhí)行處理程序，不管它直接綁定在元素上，還是從后代（內(nèi)部）元素冒泡到該元素的

再舉一例：

<ul>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
    <li><span>hello 1</span></li>
  </ul>

<script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    $('ul').on('click','li',function(e){
        console.log(e.target)   //  被點(diǎn)擊的元素
        console.log(e.currentTarget)   //  li   
        console.log(e.currentTarget === this)  // true
    })
  </script>

總結(jié)：
上面的例子：當(dāng)li中含有子元素的時(shí)候，如果點(diǎn)e.target指的是觸發(fā)事件的元素，可能是span也可能是li，此時(shí)的e.currentTarget指的是selector那個(gè)參數(shù)，也就是本例中的li。

還有一種情況舉例：

  <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
    <li>hello 4</li>
  </ul>

<script>
    let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    for(let i=0;i<aLi.length;i++){  
      aLi[i].addEventListener('click',function(e){
        let oLi1 = e.target  
        let oLi2 = e.currentTarget
        console.log(oLi1)  // li
        console.log(oLi2)  // li
        console.og(oLi1===oLi2)  // true
      })
    }
  </script>

在本例中，事件的目標(biāo)階段即li，由于e.currentTarget始終指向添加監(jiān)聽事件的那個(gè)對(duì)象，即aLi[i]，也就是HTML中的li，而e.target指向觸發(fā)事件監(jiān)聽的那個(gè)對(duì)象，也是li，因此e.target和e.currentTarget相等，同時(shí)也和this相等。

總結(jié)

因此不必記什么時(shí)候e.currentTarget和e.target相等，什么時(shí)候不等，理解兩者的究竟指向的是誰即可。

e.target 指向觸發(fā)事件監(jiān)聽的對(duì)象。
e.currentTarget 指向添加監(jiān)聽事件的對(duì)象。