<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