浅析DOM事件中target和currentTarget的区别
一、结论
1、target 是事件触发的真实元素
2、currentTarget 是事件绑定的元素
3、事件处理函数中的 this 指向始终指向为 currentTarget
4、target 和 currentTarget 有时候是同一个元素，有时候不是同一个元素 （因为事件冒泡）
- 当事件是子元素触发时，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>
二、没弄懂target到底是什么东东，现把target和currentTarget知识点留下来。以备不时之需。
Event.target 和 event.currentTarget 都是对一个触发事件的对象的引用。不同之处在于：
1、Event.target 对触发事件的对象的引用（即它标识事件发生的元素）
2、event.currentTarget 当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素（也就是说是事件委托绑定的那个元素）
3、target 在事件流的目标阶段；currentTarget 在事件流的捕获，目标及冒泡阶段。
只有当事件流处在目标阶段的时候，两个的指向才是一样的，
而当处于捕获和冒泡阶段的时候，target 指向被点击的对象，而 currentTarget 指向当前事件绑定的活动的对象（一般为父级）
