BOM学习

1. BOM概述

1.1 什么是BOM

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

1.2 BOM的构成

window对象是浏览器的顶级对象。

2. window对象常见事件

2.1 窗口加载事件

说明：
window.onload是窗口（页面）加载事件，当文档内容完全加载完成后会触发该事件（包括图像，脚本文件，CSS文件等）。

使用：

window.onload = function(){};
// 或下面的用法
window.addEventListener('load', function(){});

另外一个函数：

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

说明：
该事件触发时机：仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上支持。

如果页面图片很多，从用户访问到onload触发可能需要较长时间，某些交互效果无法实现（比如点击按钮），此时使用DOMContentLoaded事件比较合适。加载速度快一些。

2.2 调整窗口大小事件

window.onresize = function(){};

说明：
调整窗口大小加载事件

3. 定时器

3.1 setTimeout

window.setTimeout(() => {}, delayMilliseconds);

返回值：一个用来标识当前定时器的唯一标识符。
delayMilliseconds默认为0。
说明：
setTimeout()用于设置一个定时器，该定时器在定时器到期后执行调用函数。

3.2 clearTimeout()

window.clearTimeout(timeoutID)

说明：
clearTimeout()取消了返回值为timeID的setTimeout建立的定时器。

3.3 setInterval()

window.setInterval(cb, millisenconds);

说明：
setInterval()重复调用一个函数，每隔一段时间，就去调用一次回调函数。

3.4 clearInterval()

window.clearInterval(intervalID);

说明：
取消标识符为intervalID的定时器

4. location 对象

4.1 什么是location对象

location对象用于获取或设置窗体的URL，并且可以用于解析URL。

4.2 location对象属性

属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容

4.3 location对象的方法

对象方法	返回值
location.assign()	可以用来跳转页面，也可以重定向页面
location.replace()	替换当前页面，不记录历史，所以无法回退
location.reload()	重新加载页面

5. navigator对象

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

6. history 对象

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

对象方法	作用
back()	可以后退
forward()	前进功能
go(参数)	可以实现前进后退

7. 元素偏移量offset系列

7.1 offset概述

作用：

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 返回值都不带单位
  常用属性：
  | 属性 | 作用 |
  |–|--|
  | ele.offsetParent | 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body |
  | ele.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
  | ele.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
  | ele.offsetWidth | 返回自身包括padding，border，content的宽度 |
  | ele.offsetHeight | 返回自身包括padding，border，content的高度 |

7.2 offset与style的区别

offset

• offset可以得到任意样式表中的样式值
• offset获得的数值是没有单位的
• offsetWidth包含padding+border+width
• 只能读，不能写
• 获取元素大小位置，用offset更合适

style

• style只能得到行内样式表中的样式值
• style.width获得的值是带有单位的字符串
• style.width获得的值不包含padding和border
• style.width 是可读写属性
• 想要给元素改值，使用style更合适

8. 元素可视区域 client系列

获取元素可视区域的相关信息

属性	作用
ele.clientTop	返回元素上边框的大小
ele.clientLeft	返回元素左边框的大小
ele.clientWidth	返回自身包括padding，content的宽度，返回值不带单位
ele.clientHeight	返回自身包括padding，content的高度，返回值不带单位

9. scroll 系列

可以获得元素大小和滚动距离

属性	作用
ele.scrollTop	返回被卷走的上侧距离，返回值不带单位
ele.scrollLeft	返回被卷走的左侧距离，返回值不带单位
ele.scollWidth	返回自身实际的宽度，不含边框，返回值不带单位
ele.scollHeight	返回自身实际的高度，不含边框，返回值不带单位

10. 三大系列总结

主要用法：

• offset系列常用于获得元素位置 offsetLeft, offsetTop
• client经常用于获取元素大小 clientWidth, clientHeight
• scroll经常用于获取滚动距离 scrollTop, scrollLeft
• 页面的滚动距离通过window.pageXOffset获得

11. mouseenter和mouseover区别

• 当鼠标移动到元素上时就会触发mouseenter事件
• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发
• mouseenter鼠标只有进入自身盒子时会触发一次