最近面试被问到这个问题,还是感叹自己是个小白啊。 面试官问我target和currentTarget的区别。
本文大多出自于一个掘金博主的文章点击打开链接
target
在事件流的冒泡阶段;
currentTarget
在事件流的捕获,冒泡阶段。只有当事件流处在冒泡阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,
target
指向被单击的对象
currentTarget
指向当前事件活动的对象(一般为父级)。
事件的冒泡和捕获通过两张图来了解一下吧
事件捕获
事件冒泡
事件的捕获就是当点击一个元素的时候,事件会在这个元素的祖先元素找下来。
而冒泡阶段就是相反了,当捕获阶段完成后就进行冒泡阶段,从元素再找回祖先节点。
我们给元素绑定一个时间的时候用到了addEventListener()这个函数,一般我们用两个参数。当第三个参数不指定或者为false时,会默认将这个时间绑定在冒泡阶段。当第三个参数为true时,就会把这个时间绑定在捕获阶段。
然后再来看一段代码:
<body>
<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>
</body>
这段代码点击d时输出如下:

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