WebAPI-window对象的常见事件

概述

BOM 是 Browser Object Model 的缩写，就是浏览器对象模型；BOM 提供了与浏览器窗口进行交互的对象；BOM 就是由一系列相关的对象构成，并且每个对象都用于许多的方法和属性，其核心对象是 window

与 DOM 和 JavaScript 不同，DOM 拥有标准化组织 W3C， JavaScript 的语法标准化组织是 ECMA，而 BOM 没有官方标准，BOM 最初是 Netscape 浏览器标准的一部分，也就是说：对于现代浏览器，每个浏览器都有自己的 BOM 实现方法，所以直接使用BOM会存在兼容性问题。

BOM 比 DOM 更大，BOM 包含 DOM。

window 对象

window 对象是核心对象，也是浏览器的顶级对象；在全局作用域中定义的变量、函数都会归属为 window 对象的属性和方法，所以在调用的时候可以省略 window 前缀。

例如: window.alert 可以简写为 alert()

window 对象也是 JS 访问浏览器的一个接口

window 对象中有一个特殊的属性 name，所以在声明变量的时候要避免使用它

// 没有定义变量直接使用，正常情况会直接报错
console.log(name) // 没有报错，输出的是空字符串；是因为 window 对象拥有该属性，默认为空字符串
console.log(window)

window 对象常见事件

窗口（页面）加载事件

load 在页面内容全部加载完成后（包括图像、脚本文件、CSS 文件等）会触发该事件；所以通过该事件就可以将 JS 代码写在页面元素的上方。

该事件可以通过 on 前缀来注册

window.onload = fn

也可以通过 addEventListener() 方法来注册

window.addEventListener(‘load’, fn, false)

需要注意的是：通过 on 注册的事件相同事件只能注册一次，如果多次注册相同的事件，后者会覆盖前者；通过 addEventListener() 方法可以注册多个相同的事件，事件会按照注册的顺序依次执行。

示例：

 
 <script type="text/javascript">
   // 注册 load 事件
   window.onload = function() {
     function $(selector) {
       return document.querySelector(selector)
     }
	 // 为元素注册点击事件
     $('#btn').onclick = function() {
       alert('触发了点击事件！')
     }
   }
 script>

 <button id="btn">按钮button>

调整窗口大小事件

resize 当浏览器窗口或框架（可视区域）的大小（像素）发生变化时会触发该事件；通过该事件可以设置响应式布局。

示例：

<div id="box">div>

<script>
	var box = document.querySelector('#box')
	// 注册 resize 事件
	box.onresize = function() {
		// 当浏览器窗口小于等于时隐藏指定标签
		if (window.innerWidth <= 600) {
			box.style.display = 'none'
		} else {
			box.style.display = 'block'
		}
	}
script>

CSS：

#box {
	width: 200ppx;
	height: 200px;
	background: skyblue;
}

补充：window.innerWeight 用于获取浏览器窗口可视区域的宽度，window.innerHeight 获取浏览器窗口可视区域的高度