在開(kāi)發(fā)中經(jīng)常遇到event.target 和 event.currentTarget被混淆的問(wèn)題沪袭，這里嘗試給出更貼切的描述來(lái)加強(qiáng)記憶。
- event.target 事件發(fā)生的地方
- event.currentTarget 事件當(dāng)前的傳遞到的地方（不論是冒泡還是捕獲方式），即addEventListener代碼所監(jiān)聽(tīng)的位置
<div id="a" style="height:400px;border:1px solid black">
<div id="b" style="height:300px;border:1px solid green">
<div id="c" style="height:200px;border:1px solid yellow">
<div id="d" style="height:100px;border:1px solid red"></div>
</div>
</div>
</div>
<script>
var capture;
document.getElementById('a').addEventListener('click', function(e) {
console.log('bind a, target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}, capture);
document.getElementById('b').addEventListener('click', function(e) {
console.log('bind b, target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}, capture);
document.getElementById('c').addEventListener('click', function(e) {
console.log('bind c, target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}, capture);
document.getElementById('d').addEventListener('click', function(e) {
console.log('bind d, target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}, capture);
</script>
如同窘，在上述代碼中锈至，如果capture不設(shè)置，就會(huì)采用冒泡方式驹愚，輸出結(jié)果為
bind d, target:d & currentTarget:d
bind c, target:d & currentTarget:c
bind b, target:d & currentTarget:b
bind a, target:d & currentTarget:a
如果設(shè)置capture為true远搪，輸出結(jié)果為
bind a, target:d & currentTarget:a
bind b, target:d & currentTarget:b
bind c, target:d & currentTarget:c
bind d, target:d & currentTarget:d
可以看到（1）bind的dom即currentTarget指向的dom（2）冒泡從里到外，捕獲從外到里
