JS详解this的用法

时间：6年前阅读：4529

this 对象返回“当前”对象。在不同的地方，this 代表不同的对象。如果在 JavaScript 的“主程序”中（不在任何 function 中，不在任何事件处理程序中）使用 this，它就代表 window 对象；如果在 with 语句块中使用 this，它就代表 with 所指定的对象；如果在事件处理程序中使用 this，它就代表发生事件的对象。

1、简单一点的例子：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#dd{    
			width:500px;    
			height: 300px;    
			margin: 100px auto;    
			background: tomato;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
//				单击事件    
				dd.onclick = function(){    
//					背景颜色变色    
//					dd.style.background = 'palevioletred';    
//					this在事件中指向的是事件源对象    
					this.style.background = 'blue';    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<div id="dd"></div>    
	</body>    
</html>

2、复杂一点的例子：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				margin: 0;    
				padding: 0;    
			}    
			img{    
				float: left;    
				width: 200px;    
				height: 200px;    
				margin: 5px;    
			}    
		</style>    
		<script type="text/javascript">    
			window.onload = function(){    
//				抓所有的图片    
				var imgs = document.getElementsByTagName('img');    
//				循环所有的图片,给每张图片都加单击事件    
				for (var t=0;t<imgs.length;t++) {    
//					给i图片加单击事件    
					imgs[t].onclick = function(){    
//						点击图片消失,位置不保留    
//						this.style.display = 'none';    
//						点击图片消失,位置保留    
						this.style.visibility = 'hidden';    
					}    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<!--img[src=images/$.jpg]*20 可以用这个快捷写法，但这里是演示环境只能一张一张图上传了-->    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344103343.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344134787.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566344168185.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566345210848.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566345161356.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566345452132.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566346879951.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566346441778.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566346898498.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566346120225.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566346137841.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566347193455.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566347617545.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566347114360.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566347473366.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566348895811.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566348174306.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566348196994.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566348105558.jpg" alt="" />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553566348105781.jpg" alt="" />    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS详解this的用法

网友评论