BOM概述
BOM:Browser Object Model 即是浏览器模型，它提供了一个独立于内容而于浏览器窗口进行交互的对象，其核心是window。
BOM的构成：window对象是浏览器的顶级对象，它具有双重角色
1.它是js访问浏览器的一个接口
2. 它是一个全局对象，定义在全局作用域下的变量，函数都会变成window对象的属性和方法
在调用的时候可以为省略window
注意：window下一个特殊属性window.name
window对象常见的属性
1.窗口加载事件
- 传统注册事件方式
传统注册方式如果有多个，会以最会一个window.onlaod为准
window.onload = function(){}
- 监听事件注册方式
window.addEventListener('load',function(){})
load 等页面内容全部加载完毕，才能执行包含页面dom元素 图片 flash css 等等
DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
window.addEventListener('DOMContentLOaded',function(){})
2.调整窗口大小事件
window.addEventListener('resize',function(){})
是调整窗口大小加载事件 当触发时调用的处理函数
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
</body>