zoukankan      html  css  js  c++  java
  • e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是targetcurrentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询。
    MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。
    而对于currentTarget,它指的是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。
    举个例子来说明。

    事件冒泡阶段

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <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')
        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>
    </body>
    </html>

    我们知道,e.target可以用来实现事件委托,该原理是通过事件冒泡(或者事件捕获)给父元素添加事件监听,e.target指向引发触发事件的元素,如上述的例子中,e.target指向用户点击的li,由于事件冒泡,li的点击事件冒泡到了ul上,通过给ul添加监听事件而达到了给每一个li添加监听事件的效果,而e.currentTarget指向的是给绑定事件监听的那个对象,即ul,从这里可以发现,e.currentTarget===this返回true,而e.target===this返回falsee.currenttargete.target是不相等的。

    事件目标阶段

    我们知道,在DOM事件流中分为几个不同的阶段,如图

    上述例子是事件冒泡阶段,e.currenttargete.target是不相等的,但是在事件的目标阶段,e.currenttargete.target是相等的。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <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>
    </body>
    </html>

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

    总结

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

    • e.target 指向触发事件监听的对象。
    • e.currentTarget 指向添加监听事件的对象。
  • 相关阅读:
    (Good Bye 2019) Codeforces 1270B Interesting Subarray
    (Good Bye 2019) Codeforces 1270A Card Game
    Codeforces 1283D Christmas Trees(BFS)
    Codeforces 1283C Friends and Gifts
    Codeforces 1283B Candies Division
    1095 Cars on Campus (30)
    1080 Graduate Admission (30)
    1099 Build A Binary Search Tree (30)
    1018 Public Bike Management (30)
    1087 All Roads Lead to Rome (30)
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/13728817.html
Copyright © 2011-2022 走看看