BOM 及窗口加载事件

BOM 是学习完 DOM 文档对象模型后的另一个对象模型 --------- 浏览器对象模型，它提供了一系列独立于内容而与浏览器窗口进行交互的对象，并且每个对象都有很多方法和属性，核心对象及顶级对象是 window 再来回顾一下 DOM 和 BOM 的区别：

DOM：

• 文档对象模型
• 顶级对象为 document
• 主要学习内容为操作页面元素
• 标准为 W3C 标准规范

BOM：

• 浏览器对象模型
• 顶级对象为 window
• 主要学习的是浏览器窗口的交互
• BOM 是浏览器厂商在各自浏览器设定的，兼容性很差

我们要清楚了解：BOM 比 DOM 要大，DOM 是包含在 BOM 里面的

window 对象是浏览器的顶级对象，它既是 JS 访问浏览器的一个接口，也是一个全局对象，定义在全局作用域中的变量和函数都会变成它的一个方法：但是在调用的时候我们通常会省 window，直接 console.log（a）即可，就比如我是河南人，我给别人说我的省份时不用再说我是中国河南人，一个道理

<script>vara=100;
console.log(window.a);
</script>

窗口加载事件

在之前没有学习 BOM 时，我们书写 HTML 和 Script 的顺序是先写完 HTML 再写 Script，目的是先让 HTML加载完，才能执行后面的交互效果，但是学习了 BOM 后，我们就可以实现 Script 标签随意放啦

window.addEventListener('load',function(}) :

这个方法可以使文档内容全部加载完后再执行 JS 的内容，包括了图片，flash，css，脚本文件等等，(如果使用的 window.οnlοad=function(){} 的话那么相同的元素只能被注册一次，并且以最后一次为准，使用该侦听函数注册事件则可以注册多次)，Script 标签可以放在 HTML 的前面，也可以放在 head 里面，或者是放在外部，以下便是使用该方法后将 Script 标签放在了 HTML 标签的上部

<script>window.addEventListener('load',function(){
varele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
          })
    })
</script><button>按钮</button>

document.addEventListener('DOMContentLoaded',function(}) :

该方法与上面的区别在于，这个事件仅当 DOM 加载完成就可以去执行 JS 的交互内容了，不包括图片，css，flash，脚本文件等等，如果一个页面图片很多，使用 onload 事件将会耗费大量时间，那么使用这个事件去注册将会大大减少用户等待页面的时间

<script>window.addEventListener('DOMContentLoaded',function(){
varele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
          })
    })
</script><button>按钮</button>