BOM（1）窗口加载，定时器

目标：

BOM：浏览器对象模型，与浏览器窗口进行交互的对象

而BOM是包含DOM的。一个浏览器窗口当然包含文档

关于BOM：

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局对象。定义再全局作用域的变量，函数都会变成window对象的属性和方法

窗口加载事件：

但是其也是一个传统的事件，如果用window.onload如果写多个只会以最后一个window.onload为准。
为此我们可以想DOM一样再加一个侦听器即可。

关于** document.addEventListener(‘DOMContentLoaded’,function() {
**
DOMContentLoaded与onload的区别：DOMContentLoaded只要DOM加载完成了就触发，不包括CSS,样式表，图片，flash等
onload要等全部加载完成才可以，触发需要较长时间

调整窗口大小事件

onresize：一旦调整窗口大小即会触发的事件
window.innerWidth：返回目前窗口的大小

这样我们可以实现当我们拖动窗口到一定时候的时候，让其隐藏起来

<script>
    var div = document.querySelector("div");
    document.addEventListener('resize',function () {
        if(window.innerWidth <= 800){
            div.style.display = 'none';
        }
    })
</script>

定时器

两种定时器：

1. setTimeout（）：设置定时时间，
   停止setTimeout()定时器：window.clearTimeout()
   

<script>
    var timeout1 = setTimeout(fun,3000);//设置定时器名称
    fun(){
        console.log("3秒后执行");
    }
    
    clearTimeout(timeout1);//取消指定的定时器
</script>

2. setInterval(函数名，时间); ：其跟setTimeout定时器不同的是，其会反复循环调用，实现反复播放的效果
3. 停止setInterval()定时器：window.clearInterval()
   

var tem_interval = setInterval(function () {
        console.log('每3秒我会被调用一次');
    },3000);
    clearInterval(tem_interval);

回调函数