本文已参与「新人创作礼」活动,一起开启掘金创作之路。
BOM
BOM( BrowserObject Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
2.1BOM构成
window对象是浏览器的顶级对象，它具有双重角色。
1．它是JS访问浏览器窗口的一个接口。
2．它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert)、prompt()等。
注意:window下的一个特殊属性window.name
2.2窗口加载事件
window.onload = function( ){};
window.addEventListener("load",function(){});
window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意︰
1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕再去执行处理函数。
2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
- window.addEventListener("DOMContentLoaded",function(){});
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DMContentLoaded事件比较合适。
2.2调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
window . onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意∶
- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
2.3 定时器
- setTimeout( );
window.setTimeout(调用函数，[延迟的毫秒数]);
var timer = window.setTimeout(调用函数，[延迟的毫秒数]);
//给定时器命名
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意︰
- window可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
- 停止定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout ()建立的定时器。
注意∶
- window可以省略。
- 里面的参数就是定时器的标识符。
- setInterval( )定时器
window .setInterval(回调函数[间隔的毫秒数]);
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
- 停止定时器
window.clearInterval(IntervalID);
