这两天去面试的两个小伙伴都遇到了一个问题，面试官问到你用jQuery的时候有没有用过target和currentTarget？他们的区别是什么？他们都是一脸懵，平时练习也没有用过currentTarget啊？其实currentTarget这个属性很是鸡肋，其实我们平时也用不到，下面我们通过两个例子说明平时我们为什么用不到：

举个例子：

   <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)   //  被点击的li
       console.log(oLi2)   // ul
       console.og(oLi1===oLi2)  // false
    })
  </script>

我们知道，e.target可以用来实现事件委托，e.target指向用户点击的li，而e.currentTarget指向的是给绑定事件监听的那个对象，即ul，从这里可以发现，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。
总结：
上面的例子是：省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的

再举一例：

<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)   //  被点击的元素
        console.log(e.currentTarget)   //  li   
        console.log(e.currentTarget === this)  // true
    })
  </script>

总结：
上面的例子：当li中含有子元素的时候，如果点e.target指的是触发事件的元素，可能是span也可能是li，此时的e.currentTarget指的是selector那个参数，也就是本例中的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>

在本例中，事件的目标阶段即li，由于e.currentTarget始终指向添加监听事件的那个对象，即aLi[i]，也就是HTML中的li，而e.target指向触发事件监听的那个对象，也是li，因此e.target和e.currentTarget相等，同时也和this相等。

总结

因此不必记什么时候e.currentTarget和e.target相等，什么时候不等，理解两者的究竟指向的是谁即可。

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。