target和currentTarget的概念：
1、target和currentTarget都是事件对象中的属性
2、target是指获取事件的目标。
3、currentTarget是指其事件处理程序当前正在处理事件的那个元素
this和currentTarget的关系：
在事件处理程序内部，对象this始终等于currentTarget的值。
什么情况下target和currentTarget会相等？什么时候不相等呢？
- 相等的时候
当事件处理程序直接绑定在目标元素上，此时e.target===e.currentTarget，e.target ===this
- 不相等的时候
当事件处理程序绑定在目标元素的父节点上时，currentTarget会指向绑定的父元素，而target依旧指向目标元素apple
<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
}
//绑定在apple的父元素box上
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>
网友评论