[js基础]BOM浏览器对象模型

BOM概述

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM的构成

窗口加载事件

window.onload = function(){}
window.addEventListener('load',function(){}）

当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)
1、有了window.onload就可以把js代码写在页面元素的上方
2、window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。最新的addEvent方式可使用很多次都有效。

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等等。IE9以上才支持
如果页面的图片过多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，此时使用比较合适

调整窗口大小事件

window.onresize = function () {  }
window.addEventListener('resize',function () {  });

window.innerWidth：当前屏幕的宽度

定时器

• setTimeout()
  window.setTimeout(调用函数，[延迟的毫秒数])；//window可省略，毫秒数省略的话默认为0
  延时后调用函数，也称为回调函数

调用函数可写函数名，也可写 ‘函数名()’ 也可写function(){}
在使用过程中通常有多个计数器，所以要给计数器其标识符，即命名

停止计数器
window.clearTimeout(timeoutID)

• setInterval()
  window.setIntevcal(回调函数，[间隔的毫秒数])
  每隔某个时间，调用一次回调函数
  停止计时器：
  window.clearInterval()

js执行机制

location对象

window对象提供了一个location属性用于获取或设置窗体的URl，并且可用于解析URL

location.assign()可以后退回到之前的界面

navigator对象

包含有关浏览器的信息，它有许多属性，常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。可知道用户由哪个浏览器的哪个版本打开界面。pc端还是手机端。
navigator.userAgent获取信息

history对象