event.target 与 event.currentTarget 的区别

发表于 | 阅读次数

event.target指向引起触发事件的元素
event.currentTarget则是事件绑定的元素

看个例子

1
<style>
2
body {
3
  padding: 25px;
4
}
5
#outer {
6
  float: left;
7
  padding: 50px;
8
  margin: 0 0 25px;
9
  background-color: #086FA1;
10
}
11
12
#inner {
13
  width: 100px;
14
  height: 100px;
15
  background-color: #3CA0D0;
16
}
17
18
</style>
19
<div id="outer">
20
  <div id="inner"></div>
21
</div>
22
<script>
23
    var outer = document.getElementById('outer');
24
    var inner = document.getElementById('inner');
25
    outer.addEventListener('click',function (event){
26
       console.log('event.target.id:'+event.target.id);
27
       console.log('event.currentTarget.id:'+ event.currentTarget.id); 
28
    })
29
</script>

当点击里面的元素时，输出

1
event.target.id:inner
2
event.currentTarget.id:outer

当点击外面的元素时，输出

1
event.target.id:outer
2
event.currentTarget.id:outer

当事件绑定的元素和触发的元素相同时，event.target === event.event,currentTarget。