🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：JavaScript专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

🏆BOM概述

🍇BOM的构成

🍈窗口加载事件

window.onload

window.addEventListener

DOMContentLoaded

🍉窗口调整大小事件

🏆BOM概述

BOM（Browser Object Model）即浏览器对象模型，它提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

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

BOM缺乏标准，JavaScript的语法标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM和BOM的区别
DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把[文档]当作一个[对象]来看待	BOM就是把[浏览器]当作一个[对象]来看待
DOM的顶级对象是document	BOM的顶级对象是window
DOM主要学习的是操作页面元素	BOM主要学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

🍇BOM的构成

BOM比DOM更大，它包含DOM

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

1.它是JS访问浏览器窗口的一个接口

2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

在调用时可以省略window，如使用alert();、prompt();等。

注意：window下有一个特殊属性 window.name

🍈窗口加载事件

window.onload

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS、文件等)的调用处理函数。简言之：window.onload会等所有事件加载完成后在执行，所以其JS代码可以放在任何地方。

// 格式如下
window.onload = function(){}
// 或者
window.addEventListener('load',function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.onload = function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('Hello World')
            })
        }
    </script>
    <button>按钮</button>
</body>
</html>

注意：

1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，在去执行处理函数。

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

3.如果使用addEventListener则没有限制。

window.addEventListener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('Hello World')
            })
        })
        window.addEventListener('load',function(){
            alert('你好 世界')
        })
    </script>
    <button>按钮</button>
</body>
</html>

DOMContentLoaded

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等，所以加载速度比 load 更块一些。ie9以上才支持，如果页面的图片很多的话，从用户访问到onload触发可能需要较长时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded时间比较合适。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('Hello World')
            })
        })
        window.addEventListener('load',function(){
            alert('你好 世界')
        })
        document.addEventListener('DOMContentLoaded',function(){
            alert('我先执行的哦')
        })
    </script>
    <button>按钮</button>
</body>
</html>

🍉窗口调整大小事件

window.onresize = function(){}
window.addEventListener('resize',function(){})

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

注意：

1.只要窗口大小发生像素变化，就会触发这个事件。

2.window.innerWidth当前屏幕的宽度，经常用这个事件完成响应式布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #008c8c;
        }
    </style>
</head>
<body>
    <script>
        window,addEventListener('load',function(){
            var div = document.querySelector('div');
            window.addEventListener('resize',function(){
                console.log(window.innerWidth);
                console.log('变化了');
                if(window.innerWidth<=600){
                    div.style.display = 'none'
                }else{
                    div.style.display = 'block'
                }
            })
        })
    </script>
    <div></div>
</body>
</html>