一、什么是BOM？

浏览器模型，提供了与浏览器窗***互的对象，核心对象是window

前面文章提及的alert(),prompt()都属于windows对象方法

二、window对象的常见事件

1、onload：页面加载事件，当文档内容加载完执行该事件

对比例子：

<script>
    var divDom = document.querySelector('divDom')
    console.log(divDom);//输出null
</script>
<div></div>

<script>
    window.onload = function(){
        var divDom = document.querySelector('div')
        console.log(divDom);//输出<div></div>
    }
</script>
<div></div>

<script>
    window.onresize = function(){
        console.log(window.innerHeight);
        console.log(window.innerWidth);
    }
</script>

三、定时器

1、延时器：延迟多少时间执行setTimeout

<p>请等待2秒</p>
<script>
    //写法一
    function test() {
        alert('执行')
    }
    setTimeout('test()',2000);
    //写法二
    setTimeout(function test(){
        alert('执行')
    },2000)
</script>

<p>请等待2秒</p>
<script>
        //写法一
        function test() {
            console.log('执行');
        }
        setInterval('test()',2000);
        //写法二
        setInterval(function test(){
            console.log('执行');
        },2000)
</script>

3、回调函数callback

（1）概念：回调函数其实是一个参数，将这个函数作为参数传到别的函数里面，回调函数是最后执行的

（2）代码例子

<script>
    function A(callback) {
        callback()
        console.log('我是主函数');
    }
    function B() {
        console.log('回调函数');
    }
    function C() {
        console.log('第三个函数');
    }
    A(B)
    C()
</script>

<p>请等待</p>
<button class="btn1">清除1</button>
<button class="btn2">清除2</button>
<script>
    var timer1 = setTimeout(function test() {
        alert('执行1')
    },2000)
    var timer2 = setInterval(function test2() {
        console.log('执行2');
    },2000)
    var btn1 = document.querySelector('.btn1')
    btn1.onclick = function(){
        clearTimeout(timer1)
    }
    var btn2 = document.querySelector('.btn2')
    btn2.onclick = function(){
        clearInterval(timer2)
    }
</script>

<script>
    console.log(1);
    setTimeout(function(){
        console.log(2);
    },100)
    console.log(3);
</script>