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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知