BOM浏览器对象模型|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第24天

浏览器对象模型（Browser Object Model (BOM)）的顶层对象是window，所有浏览器都支持 window 对象。它表示浏览器窗口 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。包括 HTML DOM 的 document 也是 window 对象的属性之一。

那么今天我就来记录在浏览器对象模型中有几种常用的事件对象：

一、页面加载（onload）事件：

onload 事件会在页面或图像加载完成后立即发生。 onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 使用方法：

          window.addEventListener('load',function (){
                var btn=document.querySelector('button');
                btn.addEventListener('click',function (){
                    alert('window');
                })
            })
          widow.onload=function(){}
                //或者
          window.addEvenListener("load",function(){});
                //如果有多个window.onload那么以最后一个为准，如果用addEventListener则没有限制
    
          document.addEventListener('DOMContentLoaded',function (){
            alert(33);
           
        })
        //load： 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
        //DOMContentLoaded： DOM加载完毕，不包含图片flash css等就可以执行 加载速度比load更快一些

二、定时器事件之setTimeout：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。使用方法：

    //window.setTimeout(调用函数，延时时间）；
//1、window在调用的时候可以省略
//2、延时单位是毫秒  默认是0
//3、这个调用函数可以直接写函数 还可以写函数名
//页面中可能有很多定时器，我们可以给定时器加标识符（起名字）
   window.setTimeout(function (){
    alert('时间到了');
//2秒之后弹出“时间到了”警示
},2000)

function callback(){
    alert('爆炸了');
}
var time1=setTimeout(callback,3000);  //通过回调函数来使用定时器，3秒之后输出“爆炸了”
var time2=setTimeout(callback,5000);
//1000 毫秒= 1 秒。
//如果你只想重复执行可以使用setInterval() 方法。
//使用 clearTimeout()方法来阻止函数的执行。