今天在看一段代码的时候发现了一个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则不会变,一直指向触发该事件的目标节点。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。