WebAPI-window对象的常见事件 WebAPI

概述 BOM 是 Browser Object Model 的缩写，就是浏览器对象模型；BOM 提供了与浏览器窗口进行交互的对象；BOM 就是由一系列相关的对象构成，并且每个对象都用于许多的方法和属性，其核心对象是 window
【WebAPI-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() 方法可以注册多个相同的事件，事件会按照注册的顺序依次执行。
示例：

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

文章图片

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

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

CSS：