event.target指向引起触发事件的元素
event.currentTarget则是事件绑定的元素
看个例子
<style>
body {
padding: 25px;
}
#outer {
float: left;
padding: 50px;
margin: 0 0 25px;
background-color: #086FA1;
}
#inner {
width: 100px;
height: 100px;
background-color: #3CA0D0;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click',function (event){
console.log('event.target.id:'+event.target.id);
console.log('event.currentTarget.id:'+ event.currentTarget.id);
})
</script>
当点击里面的元素时，输出
event.target.id:inner
event.currentTarget.id:outer
当点击外面的元素时，输出
event.target.id:outer
event.currentTarget.id:outer
当事件绑定的元素和触发的元素相同时，event.target === event.event,currentTarget。
