BOM--window对象 / 定时器 / 案例：5s后自动关闭广告 / 案例：定时器实现倒计时

BOM概述

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

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

BOM缺乏标准
BOM比DOM更大，它包含DOM

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

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局对象，定义在全局作用域中的变量函数，函数都会变成window 对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于window 对象方法，如alert()、prompt()等
3. window 下有个特殊属性 window.name 因此在定义变量时不能用name

window对象的常见事件

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

注意：

1. 有了window.onload 就可以把JS代码写道页面元素上方，因为onload 是等页面内容全部加载完毕，再去执行处理函数
2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload 为准，因此更推荐用 window.addEventListener 方式，不会产生冲突

     <script>
        window.onload = function () {
   
        var btn = document.querySelector("button");
        btn.addEventListener("click", function () {
   
          alert("点击我！");
        });
      };
      <button>点击</button>;

load 是等页面全部加载完毕，包含页面dom元素 图片 flash css 等
DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css等就可以执行，加载速度比 load 更快

     //先加载33 再弹出22
        window.addEventListener('load ',function(){
   
            alert(22);
        })
        document.addEventListener('DOMContentLoaded',function(){
   
          alert(33);

• window.onresize 调整窗口大小事件，只要窗口大小发生改变，就会触发这个事件，我们经常利用这个事件完成响应式布局，

使用 window.innerWidth/Height获得当前屏幕的宽度/高度

 //window.resize 调整窗口大小事件 只要窗口大小发生改变，就会触发这个事件
      window.addEventListener("load", function () {
   
        var div = document.querySelector("div");
        window.addEventListener("resize", function () {
   
          console.log(window.innerWidth)