19.BOM浏览器对象模型

目录

一、什么是BOM

二、window对象常见的事件

1. window.onload 窗口加载事件

2. DOMContentLoaded

3. window.onresize

4.  定时器window.setTimeout(调用函数,延迟的时间)

5. window.clearTimeout(定时器的名字) 停止定时器

6. window.setInterval(回调函数,延迟时间) 重复调用这个函数

7.  window.clearInterval(定时器的名字) 停止定时器

---

一、什么是BOM

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

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

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

1、它是js访问浏览器窗口的接口

2、它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候可以省略window。如：alert、prompt等

---

二、window对象常见的事件

1. window.onload 窗口加载事件

当文档内容完全加载完成后触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数

注意：

• 有了window.onload就可以把js代码写到元素的上方，因为onload是等页面内容全部加载完毕才执行

• window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准

• 如果使用addEventListener则没有限制

       window.addEventListener('load', function() {

           alert(11);

       });

2. DOMContentLoaded

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

       document.addEventListener('DOMContentLoaded', function() {

           alert(22);

       });

3. window.onresize

调整窗口大小事件，当触发时就调用的处理函数

   var div = document.querySelector('div');

        window.addEventListener('resize', function() {

            console.log(window.innerWidth); // 获取当前屏幕的宽度

            if (window.innerWidth <= 800) {

                div.style.display = 'none';

            } else {

                div.style.display = 'block';

            }

        })

4.  定时器window.setTimeout(调用函数,延迟的时间)

• 1、window可以省略

• 2、延迟的时间是毫秒数，可以省略，默认是0

• 3、调用函数可以写在外面，里面写函数名即可

• 4、一个也页面中定时器会有很多，所以经常会给定时器赋值一个标识符（名字）

   // setTimeout(function() {

        //     console.log('2秒后爆炸');

        // }, 2000)

        function callback() {

            console.log('爆炸');

        }

        var time1 = setTimeout(callback, 2000);

        var time2 = setTimeout(callback, 5000);

5. window.clearTimeout(定时器的名字) 停止定时器

   var btn = document.querySelector('button');

        var timer = setTimeout(function() {

            console.log("5 秒后爆炸");

        }, 5000)

        btn.addEventListener('click', function() {

            clearTimeout(timer);

        })

6. window.setInterval(回调函数,延迟时间) 重复调用这个函数

        var timer = setInterval(function() {

            console.log("我会被重复调用输出");

        }, 1000)

7.  window.clearInterval(定时器的名字) 停止定时器

var begin = document.querySelector('.begin');

        var end = document.querySelector('.end');

        var timer = null; // 定义一个全部变量，赋值为null，因为null是一个空对象

        begin.addEventListener('click', function() {

            timer = setInterval(function() {

                console.log(11);

            }, 1000)

        })

        end.addEventListener('click', function() {

            clearInterval(timer);

        })