黑马前端pink教学的BOM笔记

BOM

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

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

BOM缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape（网景公司）浏览器标准的一部分。

DOM主要学习的是操作页面元素 BOM学习的浏览器窗口交互的一些对象

BOM的构成

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

1. 它是js访问浏览器窗口的一个接口。
2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象的方法如：alert()、prompt()等。

窗口加载事件

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

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

如果使用window.addEventListener(‘load’,function(){})则没有限制

Window.addEventListener(‘DOMContentLoaded’,function(){})  DOMContentLoaded是DOM加载完毕，不包含图片、falsh、css等就可以执行 加载速度比load更快一些

调整窗口大小事件

Window.onresize是调整窗口大小加载事件，当触发时就会调用处理函数

1. 只要窗口的大小发生像素变化，就会触发这个事件。
2. 我们经常利用这个事件完成响应式布局。window.innerWidh获取当前屏幕的宽度

定时器

Window对象给我们提供了2个定时器方法：setTimeout()  setInterval()

setTimeout(调用函数，延时时间)；

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

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

1. window在调用的时候可以省略
2. 这个延时时间的单位时毫秒 可以省略 如果省略默认是0
3. 这个调用函数可以直接写函数 还可以写函数名 或’函数名()’不提倡使用
4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

停止定时器 clearTimeout()

clearTimeout()方法可以取消先前通过调用setTimeout()建立的定时器

里面的参数就是定时器的标识符

setInterval(回调函数，[间隔的毫秒数])定时器

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

1. window在调用的时候可以省略
2. 这个调用函数可以直接写函数 还可以写函数名 或’函数名()’不提倡使用
3. 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

setTimeout延时调用 时间到了就会去调用这个回调函数，只调用一次 就结束了这个定时器

setInterval 每隔这个延时时间就去调用这个回调函数，会调用很多次，重复调用这个函数

停止定时器 clearInterval()

clearInterval()方法取消了先前通过调用setInterval()建立的定时器 里面的参数就是定时器的标识符。

定时器中的this指向的是window

JS执行机制

JS是单线程

JavaScript语言的一的特点就是单线程，也就是说，同一时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后在删除。