BOM窗口加载事件 定时器 JS执行机制 location navigator history 对象

BOM 的构成

window 对象是浏览器的顶级对象，具有双重角色

1，它是 JS 访问浏览器窗口的一个接口

2，它是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

window 对象常见事件

窗口加载事件

// 当文档内容全部加载完毕会触发该事件（图像，脚本文件，css文件等）;
window.onload = function () {}
window.addEventListener('load', function () {});
// 当DOM元素加载完毕就执行，不考虑图片 flash 等元素
window.addEventListener('DOMContentLoaded', function () {});

调整窗口大小

// 当window窗口变化时触发
window.onresize = function () {}
window.addEventListener('resize', function () {});

定时器

setTimeout() 定时器

// 该定时器在定时器到期后执行调用函数， 毫秒如果省略默认是0，到时间就执行，只执行一次
window.setTimeout(调用函数，[延迟的毫秒数]);
// 这个函数也称为毁掉函数 callback
var timeID = setTimeout(fn, 2000);

停止 setTimeout() 定时器

window.clearTimeout(timeID);

setInterval() 定时器

// 该定时器在定时器到期后执行函数，毫秒默认是0，到时间就执行，一直循环
window.setInterval(调用函数, [延迟的毫秒数]);
var timeID = setInterval(function () {}, 2000);

停止 clearInterval() 定时器

window.clearInterval(intervalID);

JS 执行机制

JavaScript语言的一大特点就是单线程，也就是说同一时间只能做一件事，为了解决这个问题，利用CPU的计算能力出现了同步和异步

同步：前一个任务结束后再执行下一个任务，程序的执行顺序与任务的排列顺序是一致的

异步：在做这个任务的同时，还能执行其他的任务

JS把任务分为同步任务和异步任务；

1，先执行执行栈中的同步任务；

2，异步任务（回调函数）放到任务队列中；

3，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行；

由于主线程不断的重复获得任务，执行任务，再获取任务，在执行，所以这种机制被称为事件循环（event loop）

location 对象

window 对象给我们提供了一个location属性用于获取或这只窗口的URL，并且解析URL，因为这个属性返回的是一个对象，所以也叫location对象

location对象属性方法	返回值
location.href	获取或设置整个URL
location.host	返回主机域名
location.port	返回端口号，如果未写返回空字符串
location.search	返回参数
location.pathname	返回路径
location.hash	返回片段，#后面内容 常见于锚点链接
location.assign()	跟href一样可以跳转页面也称为重定向
location.replace()	替换当前页面，因为不记录浏览记录不能回退
location.reload()	重新加载页面，相当于刷新页面或者F5 如果参数为true强制刷新页面

location.assign('http://www.baidu.com/');
location.replace('http://www.baidu.com/');
location.reload(true);

history 对象

与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过得URL

history对象	作用
history.back()	后退与浏览器左上角功能一致
history.forward()	前进与浏览器左上角功能一致
history.go()	前进后退功能，1前进一个页面，-1后退一个页面，递增

navigator 对象

navigator 对象包含浏览器相关信息，只要最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值；

window.navigator.userAgent;