参考博客：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>