currentTarget VS target
target
在事件流的目标阶段;
currentTarget
在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,
target
指向被单击的对象
currentTarget
指向当前事件活动的对象(一般为父级)。
冒泡和捕获
当点击页面的一个元素的时候,事件会从这个元素的祖先元素逐层传递下来,这个过程成为事件捕获
;当事件传递到这个元素之后,又会把事件逐成传递回去,直到根元素为止,这个阶段是事件的冒泡阶段
。
事件捕获
事件冒泡
我们为一个元素绑定一个点击事件的时候,可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener
的第三个参数为true
的时候,代表是在捕获阶段绑定,当第三个参数为false
或者为空的时候,代表在冒泡阶段绑定。
知道事件有这么一个穿透的过程之后,结合下面的例子,就可以很好来理解event.target
和event.currentTarget
:
<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元素的时候;
target:d¤tTarget:d // d触发
target:d¤tTarget:c // c触发
target:d¤tTarget:b // b触发
target:d¤tTarget:a // a触发
复制代码
从输出中我们可以看到,event.target
指向引起触发事件的元素,而event.currentTarget
则是事件绑定的元素,只有被点击的那个目标元素的event.target
才会等于event.currentTarget
。
将上述
处于捕获阶段
target:d¤tTarget:a // a触发
target:d¤tTarget:b // b触发
target:d¤tTarget:c // c触发
target:d¤tTarget:d // d触发
target:d¤tTarget:c // c触发
target:d¤tTarget:d // d触发