BOM 概述+window对象常见事件

最新推荐文章于 2024-05-30 11:27:58 发布

夏大爷耶耶耶

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量401

点赞数 2

分类专栏： JS笔记文章标签： javascript es6 bom

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121206974

版权

JS笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

BOM(Browser Object Model)提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

JavaScript的标准组织是ECMAScript，DOM标准化组织是W3C，而BOM缺乏标准，是Netscape浏览器标准的一部分。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

BOM比DOM更大，包含DOM

window对象是浏览器的顶级对象，它具有双重角色。

1.它是JS访问浏览器窗口的一个接口

2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

在调用时可以省略window，前面学习的对话框都属于window对象方法，如alert() prompt()等

注意：window下的一个特殊属性window.name

window对象的常见事件

· 窗口加载事件：①window.onload (可将js写到页面元素上方或外部了)传统注册方式只能写一次，有多个以最后一个为准。addEventListener无限制。

②document.addEventListener('DOMContentLoaded', function() {}) IE9以上支持，页面图片过多用它比较快。

· 调整窗口大小事件(适用于响应式布局)：window.onresize = function() {};

window.addEventListener('resize', function() {})

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>BOM概述+window对象的常见事件</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
	<script>
		//BOM(Browser Object Model)是浏览器对象模型，它提供了独立于内容而浏览器窗口进行交互的对象，其核心对象是window。
		//BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
		//BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
		//BOM比DOM更大，它包含DOM。
		//window对象是浏览器的顶级对象，它具有双重角色。
		//1.它是JS访问浏览器窗口的一个接口
		//2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
		//在调用时可以省略window，前面学习的对话框都属于window对象方法，如alert()  prompt()等
		//注意：window下的一个特殊属性window.name

		//window.document.querySelector()
		// var num = 10;
		// console.log(num); //10
		// console.log(window.num); //10
		// function fn() {
		// 	console.log(11);
		// }
		// fn(); //调用执行结果11
		// window.fn(); //11


		//window对象的常见事件
		// window.onload = function(){
		// 	var btn=document.querySelector('button');
		// 	btn.addEventListener('click',function(){
		// 		alert('点击俺')
		// 	})
		// }
		// window.addEventListener('load', function() {
		// 	var btn = document.querySelector('button');
		// 	btn.addEventListener('click', function() {
		// 		alert('点击俺');
		// 	})
		// })
		//窗口加载事件  window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
		//window.onload = function(){}  或者 window.addEventListener('load',function(){});
		//注意：1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
		//2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
		//3.如果使用addEventListener则没有限制

		// window.addEventListener('load', function() {
		// 	alert(22);
		// })

		//窗口加载事件 document.addEventListener('DOMContentLoaded',function(){})
		//DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等 IE9以上支持
		//如果页面图片很多，从用户访问到onload触发可能需要较长的时间，交互效果不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适
		//加载速度比load更快一些
		// document.addEventListener('DOMContentLoaded', function() {
		// 	alert(33);
		// })

		//调整窗口大小事件
		//window.onresize = function(){} 
		//window.addEventListener('resize',function(){});
		//window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
		//注意：1.只要窗口大小发生像素变化，就会触发这个事件。
		//2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
		window.addEventListener('load', function () {
			var div = document.querySelector('div');
			window.addEventListener('resize', function () {
				console.log('变化了');
				console.log(window.innerWidth);
				if (window.innerWidth <= 800) {
					div.style.display = 'none';
				}
			})
		})

	</script>
</head>
<body>
	<div></div>
	<button>点击</button>
</body>
</html>

夏大爷耶耶耶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM 概述+window对象常见事件

BOM(Browser Object Model)提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。JavaScript的标准组织是ECMAScript，DOM标准化组织是W3C，而BOM缺乏标准，是Netscape浏览器标准的一部分。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM比DOM更大，包含DOMwindow对象是浏览器的顶级对象，它具有双重角色。1.它是JS访问浏览器窗口的一个接口2.它是一个全局对象，定义在全..
复制链接

扫一扫