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() 方法可以注册多个相同的事件，事件会按照注册的顺序依次执行。
示例：
<!-- 在页面元素之前写入 JS 代码 --><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 获取浏览器窗口可视区域的高度
小灰灰
谁践踏了优雅
╰+哭是因爲堅強的太久メ
港控/mmm°
「爱情、让人受尽委屈。」
还没有评论，来说两句吧...