JS学习之BOM1

BOM浏览器对象模型

BOM概述

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

口述：学习一个浏览器中如何给转到前一个或后一个页面，如何刷新等

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

BOM缺乏标准，JS语法的标准化组织是ECMA DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分

 

BOM的构成

bom比dom大 它更包含DOM

 

window对象时浏览器的顶级对象，它具有双重对象

1. 它是JS浏览器窗口的一个接口

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

在调用的时候可以省略window 前面学习的对象都属于window对象方法 比如alert()、 prompt()

注意： window下的一个特殊属性 window.name 本身就有意义 不能写成var name = 10;

 

window对象的常见事件

窗口加载事件

window.onload = function() { }

或者

window.addEventListener('load', function() { } );

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）就调用的处理函数

口述：可以不管html代码在上还是在下，只要页面加载完毕后仍可以弹出

注意：

1. 有了window.onload就可以js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数

2. window.onload传统注册事件的方法只能写一次，如果有多个，会以最后一个window.onload为准

3. 如果使用addEventListener则没有限制

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

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片， flash等等 ie9以上才支持

是主要的标签加载完毕后可以执行

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

 

 

调整窗口大小事件

window.onresize = function( ) { }

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

window.onresize 是吊证窗口大小加载事件，当触发时就调用的处理函数

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件

2. 经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度

 

定时器

window对象给我们提供了2个非常好用的方法--定时器

• setTimeout()

• setInterval()

setTimeout() 定时器

window.setTimeout(调用函数，[延迟的毫秒数] )；

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

注意：

1. window可以省略

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()'三种形式，第三种不推荐

3. 延迟的毫秒数默认为0 如果写，必须是毫秒

window.setTimeout(调用函数，[延迟的毫秒数]);

setTimeout() 这个调用函数也称为回调函数callback

普通函数是按照代码顺序直接调用

这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数

简单理解：回调就是回头调用的意思，上一件事干完，再回头调用这个函数

口述：先等待时间，再执行某个函数

以前讲element.onclick = function(){} 或者element,addEventListener('click',fn); 里面的函数也是回调函数

案例：5秒自动关闭广告

• 核心思路：5秒之后，就把这个广告隐藏起来

• 用定时器setTimeout

利用到了上面的先等待时间，再执行函数

 

停止setTimeout()定时器

window.clearTimeout(timeoutID)

 

定时器之setInterval

window.setInterval(回调函数，[间隔的毫秒数]）

setInterval() 方法重复调用一个函数，每隔这个时间就去调用一次回调函数

口述：即每隔多少时间就执行一次

注意：

1. window可以省略

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()'三种形式，第三种不推荐

3. 延迟的毫秒数默认为0 如果写，必须是毫秒。表示每隔多少毫秒就自动调用这个函数

4. 因为定时器可能有很多，经常给定时器赋值一个标识符

 

案例：倒计时

 

分析：

1. 这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)

2. 这个黑色盒子里面分别存放时分秒

3. 三个黑色盒子利用innerHTML放入计算的小时分钟秒数

4. 第一次执行也是间隔毫秒数，因此刚刚刷新页面会有空白

5. 最好采取封装函数的方式，这个月可以先调用一次这个函数，放置刚开始刷新页面空白问题

 每隔一秒钟就调用时间函数