- BOM:浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交换的对象,其核心对象是window,由一系列相关对象构成,并且每个对象都提供了很多方法和属性
- BOM的构成:BOM比DOM更大,它包含DOM。
- window对象是浏览器的顶级对象,它是JS访问浏览器窗口的一个接口,它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法,调用时可以省略window,前面学习的对话框都属于window对象的方法,如alert(),prompt()等(window下的一个特殊属性window.name。
- 窗口加载事件: (1)window.οnlοad=function(){}或者window.addEventListener("load",function){});(当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件) (2)document.addEventListener(DOMContentLoaded',function(){})(该事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等) 注意:①有了window.onload就可以把JS代码写在页面元素的上方。 ②window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。 ③如果使用addEventListener,则没有限制 ④如果页面图片很多,从用户访问到onload触发可能需要较长时间,交互相关不能实现,此时用DOMContentLoaded事件合适。
- 调整窗口大小事件: (1)window.οnresize=function(){}或window.addEventListener("resize",function(){})(当触发时就调用函数) 注:①只要窗口大小发生像素变化,就会触发这个事件 ②经常利用这个事件完成响应式布局,window.innerWidth当前屏幕宽度
- 定时器: (1)setTimeout():①语法:window.setTimeout(调用函数,[延迟的毫秒数]); (单位毫秒) ②第一种写法:直接写函数
③第二种写法:写函数名
④页面中可能有多个定时器,经常给定时器加标识符(名字),window可以省略 ⑤setTimeout()这个调用函数称为回调函数callback(普通函数是按照代码顺序直接调用,而回调函数需要等待时间,时间到了才调用) (2)停止setTimeout()定时器:window.clearTimeout(timeout ID) (window可以省略) (3)setInterval()定时器:①语法:window.setInterval(回调函数,[间隔的毫秒数])(重复调用一个函数,每隔一段时间,就去调用一次回调函数) ②第一种写法:直接写函数;第二种写法:函数名 (4)停止setInterval定时器:window.clearInterval(interval ID);(括号里面是定时器标识符)