16.target和currenTarget的区别？

最新推荐文章于 2022-06-30 11:07:13 发布

yingxingyf

最新推荐文章于 2022-06-30 11:07:13 发布

阅读量659

点赞数

分类专栏： javascript常见问题总结 javascript学习路线文章标签： css3 javascript html5

本文链接：https://blog.csdn.net/qq_44930379/article/details/120947280

版权

javascript学习路线同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

javascript常见问题总结

22 篇文章 1 订阅

订阅专栏

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

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
16.target和currenTarget的区别？

target:就是事件源currentTarget:当前事件源（当前触发到哪个事件元素，那么这个事件元素就是事件源）,跟this一样。<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>作业5</title><style type="text/css">#grandpaBox{ width:300px; height:30.
复制链接

扫一扫