BOM介绍以及应用以及this指向问题

最新推荐文章于 2024-07-30 10:56:44 发布

夜夜夜璟归

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量168

点赞数 1

文章标签： servlet javascript java

本文链接：https://blog.csdn.net/m0_72313625/article/details/126630219

版权

BOM概念：
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

window页面加载事件:

Onload：是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

当我们使用window.onload 将要运行得程序进行封装之后，程序得放置位置就没有影响，他是当文档内容完全加载完成会触发该事件，也就是最后才会运行它，所以不在受限与位置

//传统得注册方式 
			window.onload = function(){
				var btn = document.querySelector('button');
				btn.onclick=function(){
					alert('我被皇上选中了');
				}

				
			}

			window.onload = function(){
				alert('我优先被皇上翻牌');
			}

当同时出现两个传统注册事件，系统会默认运行最后一个，不会运行前面一个

注意点：
1）有了 window.onload 就可把js代码写到元素得上方，因为onload 是等页面内容全部加载完毕，再去执行处理函数。
2）window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准

// 解决办法（也是最提倡得一种写法）：
			window.addEventListener('load', function() {
				var btn = document.querySelector('button');
			

				btn.addEventListener('click', function() {
					alert('我被皇上选中了');
				})
			})
			window.addEventListener('load', function() {
				alert('我和你都被皇上翻牌');
			})

利用addEventListener进行侦听函数是不会出现冲突得问题，写出来的都可以进行运行

案例：调整窗口大小

Onresize：当浏览器窗口更改的时候调用。
window.innerWidth 这个获取的是当前浏览器的宽度
注意：只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式的的布局。

<style>
			div{
				width: 200px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<script>
			
			window.addEventListener('load', function() {
				var div = document.querySelector('div')
				window.addEventListener('resize', function() {
					// console.log(window.innerWidth)
					if (window.innerWidth <= 600) {
						div.style.display = 'none';
					}else{
						div.style.display = 'block';
					}
				})
			})
						
		</script>
		<div></div>

案例：调整窗口大小，改变内部样式

当浏览器窗口发生达到700px的时候，里面的盒子的大小和颜色都会发生改变
window.innerWidth 获取到的是当前的屏幕的宽度

<style>
			div{
				width: 200px;
				height: 300px;
				background-color: pink;
			}
			.div1{
				width: 400px;
				height: 600px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<script>
			window.addEventListener('load',function(){
				var div = document.querySelector('div');
				window.addEventListener('resize',function(){
					// if(window.innerWidth<=700){
					// 	div.className = '';
					// }else{
					// 	div.className = 'div1';
					// }
					window.innerWidth<=700 ?  div.className = '' : div.className = 'div1'
					
				})
			})
		</script>		
		<div></div>

this指向问题

一般情况下this的最终指向的是那个调用它的对象

1）全局作用域或者普通函数或者定时器当中的this 指向全局对象window （注意定时器里面的this指向window）

console.log(this);  //在全局作用域下，输出的this指向的就是window
		
		function fn(){
			console.log(this)
		}
		//fn();
		window.fn();
		
		setInterval(function(){
			console.log(this)
		},1000)
		
		//这里面的this指向的也是window ， 因为setInterval 前面省略了window，
		//在普通函数 ，输出的this指向的就是window

2）方法调用中谁调用this就指向谁

var o = {
			sayHi : function(){
				console.log(this);   //这里的this指向的是o这个对象
			}
		}
		o.sayHi();   //因为这里o是调用该函数的，所以里面的this就指向调用他的人
		
		var btn = document.querySelector('button');
		
		btn.onclick = function(){
			console.log(this);   //这里的this指向的是btn这个按钮对象
		}
		//因为这两个函数的调用者都是button这个按钮，所以里面的this就指向button这个按钮
		
		btn.addEventListener('click',function(){
			console.log(this);   //这里的this指向的是btn这个按钮对象
		})

3）构造函数(构造函数的首字母必须是大写)中this 指向构造函数的实例

function Fun(){
				console.log(this); //这里的this指向的是Fun实例对象
			}
			
			var fun = new Fun();
			// 因为该函数是构造函数，所以里面的this 指向的是构造函数的实例

夜夜夜璟归

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM介绍以及应用以及this指向问题

BOM（Browser Object Model）即浏览器对象模型；Onload：是窗口 (页面）加载事件，当我们使用window.onload 将要运行得程序进行封装之后，程序得放置位置就没有影响；this指向问题一般情况下this的最终指向的是那个调用它的对象...
复制链接

扫一扫