这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战”
BOM浏览器对象模型(browser object model)
● BOM提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
window 对象
● window对象是浏览器顶级对象，他具有双重角色
● 他是js访问浏览器窗口的一个接口
● 他是一个全局对象，定义在全局作用域中的变量和函数都会变成window对象的属性和方法，在调用的时候可以省略window
常用事件
● 窗口(页面)加载事件window.onload，当文档内容完全加载完成会触发该事件。有了window.onload事件，我们的js代码可以写在页面元素的上方，因为onload是等页面全部加载完毕再去执行处理函数
● window.onload = function( ){ }
● window.addEventListener('load', function( ){ })
有以下三种情况会触发load事件
● a链接
● f5刷新页面
● 前进后退按钮
● 但是对于火狐浏览器是个例外
● 火狐浏览器有往返缓存，不仅保存着页面数据，还保存着DOM和JavaScript的状态，实际上是将整个页面缓存了。所以这时候用前进后退按钮是不会触发load事件的
● 此时可以使用pageshow加载事件
● 这个事件是在页面显示时触发的，无论页面是否来自缓存。在重新加载页面中，pageshow事件在触发load事件之后触发。
● 可以通过事件对象中的persisted属性来判断是否是缓存中的页面触发的pageshow事件(缓存页面触发则返回值为true；否则为false)
● 若写了多个onload事件，后写的会覆盖先写的onload事件
DOMContentLoaded 事件，当DOM加载完成时触发该事件(不包含样式表、图片、flash等)。该事件在IE9以上才支持。
● 如果页面的图片很多的话，从用户访问到onload事件触发可能要经过很长时间，交互效果不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适
● document.addEventListener('DOMContentLoaded', function( ){ })
调整窗口大小事件resize
● window.onresize = function( ){ }
● window.addEventListener("resize", function( ){ });
● 补充：window.innerWidth可以获得当前窗口的宽度，innerheight获得高度
● 当窗口的宽度小于等于80盒子隐藏，反之盒子显示
● 调整窗口大小时触发事件，调用处理函数。我们常用于配合响应式布局使用
定时器
● window.setTimeout( 调用函数 , [延迟毫秒数] ); 定时器到期后执行处理函数。这里的延迟时间单位为毫秒(1s = 1000ms)，不带单位。可以省略不写这个参数，就默认为立即执行。(在使用这个事件时可以不写window)
● 页面中可能会使用很多个定时器，所以使用时要给他起个名字
● setTimeout事件里面的函数需要等待时间，时间到了才去调用这个函数，因此称为回调函数。(简单理解：回调就是回头调用，上一件事做完才调用这个函数。) 之前的element.onclick = function( ){ } 和 element.addEventListener('click', function( ){ }) 这里面的函数也是回调函数
停止setTimeout()定时器
● window.clearTimeout( 计时器名称)
● window.setInterval( 回调函数, [间隔的毫秒数] )
● setInterval() 方法会重复调用一个函数，每隔一段时间，就调用一次回调函数
停止setInterval( )定时器
● clearInterval( 计时器名称)
this的指向问题
● 一般情况下，this的最终指向，是那个调用它的对象
● 1、全局作用域或者普通函数中，this指向全局对象window（注意：定时器里面的this也指向window）(以下都输出window)
● 在全局作用下的函数会作为window对象的一个方法，在调用的时候实际上是window.fn()，window经常省略(定时器也同理)
方法调用中，谁调用，this就指向谁
构造函数中，this指向构造函数的实例
js执行
● js语言的一大特点就是单线程，同一时间只能做一件事。单线程意味着所有任务都要排队，前一个任务结束，才执行下一个任务。这就有个问题：如果js执行时间太长，这样会造成页面渲染不连贯，导致页面渲染加载阻塞
● 同步：前一个任务执行完毕之后再执行后一个任务，程序的执行顺序和任务的排列顺序是一致的、同步的
● 异步：在处理一个任务时，这个任务需要耗费很长时间，那在处理这个任务的同时，可以去做其他的任务(如：煲汤需要半小时，那么这个过程中可以洗菜切菜炒菜)
js 执行机制
同步任务：都在主线程上执行，形成一个执行栈
异步任务：通过回调函数实现。异步任务相关的回调函数放到任务队列中(也叫消息队列)
● 1、普通事件，如click、resize等
● 2、资源加载事件，如load、error等
● 3、定时器，包括setTimeout和setInterval
机制
● 1 、先执行执行栈中的同步任务
● 2 、异步任务(回调函数)放到任务队列中
● 3 、一旦执行栈中的同步任务全部执行完毕，系统会依次按序读取任务队列中的异步任务。被读取到的异步任务结束等待状态，进入执行栈中开始执行
location对象
● window对象给我们我提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以也称这个属性为location对象
● URL：统一资源定位器(Uniform Resource Locator)，是互联网上标准资源的地址。互联网上每个资源都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
location对象属性
● location.href 获取或设置整个URL
● location.host返回主机(域名) (如www.itheima.com)
● location.port 返回端口号，如果为设置则返回空字符 ● location.pathname 返回路径
● location.search 返回参数
● location.hash 返回片段 井号后面的内容 常见于锚点 链接
● location对象方法
● location.assign( ) ，跟href属性类似，可以跳转页面(也称为重定向页面)
● location.replace( )，替换当前页面，因为不记录历史，所以不能后退页面
● location.reload( ) ，重新加载页面，相当于F5刷新按钮。参数默认是空或者为false，则直接刷新；当参数设置为true时为强制刷新(相当于ctrl+f5)
navigator对象
● navigator对象包含很多浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
history对象
● window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
方法
● history.back( )，后退功能
● history.forward( )，前进功能
● history.go( 参数)，前进后退功能。参数为1，前进一个页面；参数为-1，后退一个页面
