美文网首页
target与currentTarget的区别

target与currentTarget的区别

作者: 锋享前端 | 来源:发表于2018-12-04 14:07 被阅读0次

    这两天去面试的两个小伙伴都遇到了一个问题,面试官问到你用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返回falsee.currenttargete.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 指向添加监听事件的对象。

    相关文章

      网友评论

          本文标题:target与currentTarget的区别

          本文链接:https://www.haomeiwen.com/subject/fumycqtx.html