event.currentTarget与event.target

190 阅读1分钟

<div id="a">    <div id="b">      <div id="c">        <div id="d"></div>      </div>    </div></div><script>    document.getElementById('a').addEventListener('click', function(e) {      console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);    });        document.getElementById('b').addEventListener('click', function(e) {      console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);    });        document.getElementById('c').addEventListener('click', function(e) {      console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);    });        document.getElementById('d').addEventListener('click', function(e) {      console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id);    });</script>

点击d元素打印结果:

target:d¤tTarget:d

target:d¤tTarget:c

target:d¤tTarget:b

target:d¤tTarget:a

  event.target  指向引起触发事件的元素,而 event.currentTarget 则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget。

如果addEventListener第三个参数传个true,那么就是事件捕获。打印结果为:

target:d¤tTarget:a

target:d¤tTarget:b

target:d¤tTarget:c

target:d¤tTarget:d