js dom 事件委托的 target 和currentTarget

参考博客：https://blog.csdn.net/weixin_42458965/article/details/105687926

https://www.cnblogs.com/guojiabing/p/12213332.html

target是事件触发的真实元素。（点击！）
currentTarget是事件绑定的元素。（绑定！）
事件处理函数中的this指向是中为currentTarget

event对象中会有两个对象。一个是target，一个currentTarget。

currentTarget是 box.onlick= function(e){}。绑定的事件。也就是事件监听器的对象。

target。实际上点击的对象。

1 绑定在水果上，绑定的对象是水果。

如果点击水果。那么点击的对象是水果 == 绑定的水果。

如果点击的是苹果，那么对点击的对象是苹果！== 绑定的水果。

<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');
  
   //绑定在父元素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>

2 如果绑定的是苹果，那么绑定的就是苹果。 currentTarget==苹果。

无论怎么点击都是苹果。

<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');
  
   //绑定在父元素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
    }
 
    //直接绑定在目标元素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
    } 
 </script>

posted on 2021-02-22 15:13 程序员草莓阅读(233) 评论(0) 收藏举报