ターゲットとは、currentTargetとの差のDOMイベント

DOMイベントtargetcurrentTargetの違い

  • targetこれは、イベントトリガ本当の要素であり、

  • currentTargetイベントは、要素を結合さ

  • イベントハンドラthisポイントがためのものですcurrentTarget

  • currentTargetそしてtarget、時には1と同じ要素、そして時にはなく、同じ要素(なぜならイベントバブリング)

    • イベントは、子要素をトリガされると、currentTarget要素は、イベントを結合target子要素として
    • イベントがトリガされるととき要素自体、currentTargetおよびtarget同じ要素について。
<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
   } 

  //绑定在父元素box上(如果点击apple这个li时)
   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>

おすすめ

転載: www.cnblogs.com/guojbing/p/12213332.html