在开发中经常遇到event.target 和 event.currentTarget被混淆的问题，这里尝试给出更贴切的描述来加强记忆。
- event.target 事件发生的地方
- event.currentTarget 事件当前的传递到的地方（不论是冒泡还是捕获方式），即addEventListener代码所监听的位置
<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不设置，就会采用冒泡方式，输出结果为
bind d, target:d & currentTarget:d
bind c, target:d & currentTarget:c
bind b, target:d & currentTarget:b
bind a, target:d & currentTarget:a
如果设置capture为true，输出结果为
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）冒泡从里到外，捕获从外到里
