1.BOM概述

BOM = Browser Object Model 浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分

1.1BOM的构成

BOM 比 DOM 更大。它包含 DOM。
window 对象是浏览器的顶级对象，它具有双重角色
它是 JS 访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。
注意：window下的一个特殊属性 window.name

// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10
// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
    console.log(11);
}
console.fn();
// 11
var name = 10;  //不要用这个name变量,window下有一个特殊属性window.name
console.log(window.num);

2.window 对象的常见事件

2.1.窗口加载事件

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

window.onload = function(){
};
// 或者
window.addEventListener("load",function(){});

var btn=document.querySelector('button')
        // btn.onclick=function(){
        //     alert('点击我')
        // }
        btn.addEventListener('click',function(){
            alert('怎么点我')
        })

load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等

DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

//load 等页面内容全部加载完毕
<script>
      window.addEventListener("load",function(){
          alert("加载完毕")
      })
</script>

//加载速度比load更快一些
<script>
      // window.addEventListener("load",function(){
      //     alert("加载完毕")
      // })
      document.addEventListener("DOMContentLoaded",function(){
          alert("加载完毕")
      })
</script>

[

](https://blog.csdn.net/Augenstern_QXL/article/details/115406408)

2.2调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

window.onresize = function() {}
window.addEventListener('resize',function(){});