事件处理程序中this，currentTarget， target所表示不同的值

在事件处理程序中，当触发了dom中的某个事件，浏览器会将一个event对象传入到事件处理程序，这个对象包含所有与事件有关的信息，比如：导致事件的元素、事件的类型等。event对象包含一些属性和方法，其中currentTarget和target与事件目标有关。

对currentTarget和target属性的官方说明：
currentTarget：事件处理程序当前正在处理的那个元素
target： 事件的目标
this并不是event特有的属性，它在事件处理程序中代表接收事件的元素
在事件处理程序内部，对象this始终等于currentTarget的值， target的值会根据以下两种情况有所不同，因为target是事件的实际点击目标。
1.直接将事件处理程序绑定给目标元素。

<body>
<div id="parent">
<input type="button" value="hi" id="myBtn">
</div>

<script>
var btn = document.getElementById('myBtn')
var par = document.getElementById('parent');
btn.onclick = function(e) {
console.log(e.currentTarget === btn);
console.log(e.target === btn);
console.log(this === btn);
}
</script>
</body>

可以看出当直接将事件处理程序绑定给要点击的目标时，this，currenTarget，target所指代的目标是相同的，也就是说接收事件处理程序的元素和实际中被点击的元素是同一个。

2.事件委托。
事件处理程序绑定在父元素上，然后再冒泡阶段逐级向外扩散，遇到事件处理程序就触发。

<body>
<div id="parent">
<input type="button" value="hi" id="myBtn">
</div>

<script>
var btn = document.getElementById('myBtn')
var par = document.getElementById('parent');
par.onclick = function(e) {
console.log(e.currentTarget === par);
console.log(e.target === btn);
console.log(this === par);
}
</script>
</body>

在事件委托情况下，this，currentTarget相同，都指事件处理程序所绑定的元素，而target指实际中被点击的元素，也就是btn。

总结：this，currentTatget指的是事件处理程序所绑定的元素，target指的时实际点击的目标。
因为在事件委托情况下，事件处理程序绑定在父元素上，所有这三个值会有所不同。