当前位置：网站首页>16.target和currenTarget的区别？

16.target和currenTarget的区别？

2022-07-21 11:38:00 【yingxingyf】

target:就是事件源
currentTarget:当前事件源（当前触发到哪个事件元素，那么这个事件元素就是事件源）,跟this一样。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业5</title>
<style type="text/css">
#grandpaBox{
    
	width:300px;
	height:300px;
	background-color:pink;
}
#fatherBox{
    
	width:200px;
	height:200px;
	background-color:orange;
}
#meBox{
    
	width:100px;
	height:100px;
	background-color:blue;
}
</style>
</head>
<body>
	<div id="grandpaBox">
		我是爷爷
		<div id="fatherBox">
			我是父亲
			<div id="meBox">
				我是div
			</div>		
		</div>
	</div>
</body>
</html>

<script type="text/javascript">
function $(id){
    
	return document.getElementById(id);
}

//target:就是事件源
//currentTarget:当前事件源（当前触发到哪个事件元素，那么这个事件元素就是事件源）,跟this一样。

$("meBox").addEventListener("click",function(event){
    
	var evt = event || window.event;	
	console.log("我被点了,"+"target:"+evt.target.id+",currentTarget:"+evt.currentTarget.id);
	console.log("this="+this.id);
},true);

$("fatherBox").addEventListener("click",function(event){
    
	var evt = event || window.event;
	console.log("爸爸被点了,"+"target:"+evt.target.id+",currentTarget:"+evt.currentTarget.id);
	console.log("this="+this.id);
},true);

$("grandpaBox").addEventListener("click",function(event){
    
	var evt = event || window.event;
	console.log("爷爷被点了,"+"target:"+evt.target.id+",currentTarget:"+evt.currentTarget.id);
	console.log("this="+this.id);
},true);

</script>
原网站

版权声明
本文为[yingxingyf]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44930379/article/details/120947280

边栏推荐

猜你喜欢

随机推荐