“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第4篇文章,[点击查看活动详情] (s.juejin.cn/ds/jooSN7t "s.juejin.cn/ds/jooSN7t"…
target在事件流的目标阶段
currentTarget在事件流的捕获,目标及冒泡阶段。
当事件流处在目标阶段的时候,两个的指向才是一样的,
当处于捕获和冒泡阶段的时候,target指向被单击的对象;currentTarget指向当前事件活动的对象(一般为父级)。
通常情况下,target与currentTarget是一致的,但当出现父子嵌套时,target与currentTarget就有差别了!
在父子嵌套的关系中:
target触发事件源(点击谁,触发谁,当点击父元素时也不会包含子元素)
currentTarget触发的是绑定事件的标签(如果点击对象还有子节点,当前事件包括子节点在内)
<div ref="app1">
<div ref="app2"> 点我啊!! </div>
</div>
<script type="text/javascript">
let app1 = this.$refs.app1,
app2 = this.$refs.app2;
app1.addEventListener('click', e => {
console.log('e.target结果是:', e.target)
// <div ref="app2">点我啊!!</div>
console.log('e.currentTarget结果是:', e.currentTarget)
// <div ref="app1">
// <div ref="app2">点我啊!! </div>
// </div>
})
</script>