随笔：event.target和event.currentTarget

在开发中经常遇到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）冒泡从里到外，捕获从外到里