明天在看一段代码的时候发现了一个 event.target,那么什么是 event.target 呢
target 属性可返回触发事件的指标节点,简略来说,他会返回鼠标所点击的间接触发事件的节点。 从这点来说,与 this 是非常相像的,那么两者有什么区别呢
<body>
<ul>
<li> 我是第 1 个元素 </li>
<li> 我是第 2 个元素 </li>
<li> 我是第 3 个元素 </li>
<li> 我是第 4 个元素 </li>
<li> 我是第 5 个元素 </li>
</ul>
</body>
<script>
$("li").click(function (event) {console.log(this)
console.log(event.target);
})
</script>
当咱们点击第一个 li 标签时,两者输入的后果是一样的
当给父元素 ul 标签增加同名函数(触发事件冒泡)
<script>
$("ul").click(function (event) {console.log(this)
console.log(event.target);
})
</script>
此时点击第一个 li 标签的时候,this 输入了 ul 标签,而 event.target 输入了 li 标签
由此能够看出,在没有事件冒泡的时候,this 与 event.target 返回值是雷同的,都为触发事件的指标节点,而当触发事件冒泡后,this 变为 ul 标签,而 event.target 依然为 li 标签
总结:this 与 event.target 的区别为 this 可变,当含有事件冒泡时,this 始终指向该函数的调用者,而 event.target 则不会变,始终指向触发该事件的指标节点 。