event.target和this的区别

最新推荐文章于 2022-11-04 21:22:19 发布

Axs1

最新推荐文章于 2022-11-04 21:22:19 发布

阅读量708

点赞数

分类专栏：学习心得 JS HTML

本文链接：https://blog.csdn.net/Woyao01011/article/details/83117313

版权

JS 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

学习心得

16 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: black;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.box3{
				width: 50px;
				height: 50px;
				background-color: blue;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementsByClassName("box1")[0];
				var box2=document.getElementsByClassName("box2")[0];
				var box3=document.getElementsByClassName("box3")[0];
				box1.onclick=function(event){
					event=event||window.event;
					alert(event.target.className);
//					alert(this.className);
				}
				box2.onclick=function(event){
					event=event||window.event;
					alert(event.target.className);
//					alert(this.className);
				}
				box3.onclick=function(event){
					event=event||window.event;
					alert(event.target.className);
//					alert(this.className);
				}
			}
		</script>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">
					
				</div>
			</div>
		</div>
	</body>
</html>

运行这个DEMO，在事件冒泡的背景下，点击box3，event.target.className为box3，之后冒泡的事件弹出的信息也为box3；这是因为event.target指向的是被触发事件（被点击）的对象（box3），仅通过box3触发了一次事件（点击），所以只弹出一次box3；而this.name则依次弹出的为box3，box3，box1，这是因为this指向的是事件绑定的对象，事件冒泡中连续触发了三次事件，这三次事件绑定的对象都不同。

（可能说的有点复杂………）

简单的说就是，你点击了box3，那么e.target就是box3；并且由于你点击了box3，通过点击box3冒泡触发了box1，box2，

在box1和box2的事件中，e.target也是box3。但是this是谁，就和由谁触发了事件无关了。比如，无论是box2，还是box3触发了box1的事件，还是box1的事件根本没有被触发，box1的事件的this永远都是box1，忠心耿耿；