JS详解this的用法
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/post/7276.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
