一、BOM

1、什么是BOM？

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2、BOM的构成

如下图所示：

        window 对象是浏览器的顶级对象，它具有双重角色。
        它既是 JS 访问浏览器窗口的一个接口。又是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
        在调用的时候可以省略 window，alert()、prompt()等都属于 window 对象方法。
        我们可以调用window对象来看看其有哪些属性和方法。
如下所示：

console.log(window);

截取部分如下所示：

可见，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

二、window对象的常用事件

1、窗口加载事件

我们知道在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作，如下：

<body><button>点击</button><script>var btn = document.querySelector('button');btn.onclick = function(){alert('您刚点击了一下！')}</script>
</body>

点击效果为：

如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。
window.onload 就是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function(){}
//或者
window.addEventListener("load",function(){});

如上例：

<body><script>window.onload = function(){var btn = document.querySelector('button');btn.onclick = function(){alert('您刚点击了一下！')}}</script><button>点击</button>
</body>

这个时候也可以实现点击效果。

需要注意的是：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制。

如果此时我们还有一个点击事件，想要将它的操作放到元素前面呢？
来操作试试：

 <script>window.onload = function(){var btn = document.querySelector('button');btn.onclick = function(){alert('您又点击了一下！')}}window.onload = function(){alert('你好')}</script><button>点击</button>
</body>

打印结果如何呢？

可以发现，第一个事件会被第二个事件覆盖，这是，我们可以另一种方式来操作，如下：

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

代码为：

 <script>document.addEventListener('DOMContentLoaded',function(){var btn = document.querySelector('button');btn.onclick = function(){alert('您又点击了一下！')}alert('你好呀')})</script><button>点击</button>
</body>

运行结果为：

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

2、调整窗口大小事件

在很多网站上，我们会发现，当我们改变窗口大小时，里面的内容也会随之改变，这又是怎样做到的呢？这里就要用到我们的调整窗口大小事件。
其格式为：

//（1）
window.onresize = function(){}
//(2)
window.addEventListener("resize",function(){});

window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。
举个例子：
页面中有一个盒子，当我们的页面宽度小于800px时，让这个盒子的颜色变成紫色。

<!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: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div></div><script>div = document.querySelector('div')window.onresize = function(){console.log(window.innerWidth);if(window.innerWidth <= 800){div.style.backgroundColor = 'green';}}</script>
</body>
</html>

打印结果为：

同样的我们也可以通过window.addEventListener("resize",function(){})来进行上述操作，这里不在赘述。

JavaScript之BOM(BOM构成、常用事件)相关推荐

JavaScript中的BOM操作的常见事件
BOM操作的常见事件 1.点击事件clcik onclcik绑定点击标签ID.onclick = function(){ 程序: } 示例1. d1.onclick = function(){ co ...
JavaScript函数和BOM及DOM编程（详细总结-无尿点）
JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...
JavaScript 浏览器对象BOM
浏览器对象 BOM BOM是browser Object Model的缩写,简称浏览器对象模型 BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性基本的BOM体系结构图 BOM提供了一 ...
BOM模型中常用对象定义计数器网页跳转网页前进后退
今天上午学了的BOM模型中常用对象,了解了一部分的属性 For循环的规律外层循环控制行内层循环控制列 <!doctype html> <html> <head> ...
BOM和DOM和事件
BOM BOM概述 : BOM : Browser Object Model 浏览器对象模型将浏览器的各个组成部分封装称对象 ①浏览器本身就是一个对象 Navigator ②显示器屏幕对象 Scre ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
html内置时间对象,JavaScript中的常用事件，以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
JavaScript学习（三十三）—事件对象常用的属性和方法
JavaScript学习(三十三)-事件对象常用的属性和方法 (一).type属性 <style>#box {width: 200px;height:
JavaScript常用事件（1）
1.JavaScript常用事件 1.onclick事件:接收鼠标对页面元素按下并松开的动作 2.onchange事件:输入框的值发生了变化或改变下拉列表框的选项时触发的事件 3.onload事件:页 ...

JavaScript之BOM(BOM构成、常用事件)

BOM