JavaScript知识点笔记（四）

Bom概述：

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是windows。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

Windows对象常见的事件

1、窗口加载事件
window.onload = function() {}
或者
window.addEventListener(“load”,function() {});
Window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数
注意：
①有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
②window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
③如果使用addEventListener则没有限制

document.addEventListener(‘DOMContentLoaded’,function() {})
DOMContentLoaded事件触发，仅当DOM加载完成，不包括样式表，图片，flash等等。Ie9以上支持

2、调整窗口大小事件
window.onresize = function() {}
window.addEventListener(“resize”,function() {});
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：
①只要窗口大小发生像素变化，就会触发这个事件。
②利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度

定时器

1、setTimeout()定时器
语法规范：window.setTimeout(调用函数,延迟时间);
①这个window在调用的时候可以省略
②这个延迟时间单位是毫秒 可以省略，如果省略默认是0
③这个调用函数可以直接写函数 还可以写函数名 还可以写 ’函数名()’
④可以给定时器添加标识符
setTimeout()方法延时时间到了，就去调用这个回调函数，只调用一次。
注意：
setTimeout()这个函数称为回调函数 callback
普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
比如：element.onclick = function() {} 或者 element.addEventListener(“click”,fn)里面的函数也是回调函数。

停止setTimeout()定时器
window.clearTimeout(timeout ID)
注意：
①window可以省略
②里面的参数就是定时器的标识符

2、setInterval()定时器
语法规范：winodw.setInterval(调用函数,延时时间]);
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
注意:
①这个window在调用的时候可以省略
②这个间隔的时间单位是毫秒 可以省略，如果省略默认是0
③这个调用函数可以直接写函数 还可以写函数名 还可以写 ’函数名()’
④可以给定时器添加标识符

停止setInterval()定时器
window.clearInterval(intervalID);
注意：
①window可以省略
②里面的参数就是定时器的标识符

this指向问题

一般情况下this的最终指向的是那个调用它的对象
①全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
②方法调用中谁调用this指向谁
③构造函数中this指向构造函数的实例

location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5

history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history对象	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能 参数如果是1前进1个页面 如果是-1后退1个页面

元素偏移量offset系列

offset概述（该属性只能获取值不能赋值，与之相对应的是style，其可以获取值和赋值）
使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带定位的父级元素 如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的宽度，返回数值不带单位

元素可视区client系列

client就是客户端，使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位

立即执行函数

语法：(function() {})() 或者(function(){}())
主要作用：创建一个独立的作用域。避免命名冲突问题

元素滚动scroll系列

元素scroll系列属性
scroll翻译过来就是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

页面的滚动距离是通过window.pageXOffset获得的

mouseenter鼠标事件
mouseenter不会冒泡与其搭配鼠标离开的mouseleave同样不会冒泡
mouseenter和mouseover的区别
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发
mouseenter只会经过自身盒子触发

动画函数封装

动画实现原理
核心原理：通过定时器setInterval()不断移动盒子位置。
实现步骤：
1.获得盒子当前的位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用element.style.left

动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离

缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2.核心算法：（目标值 - 现在的位置）/ 10 做为每次移动的距离步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.注意步长值需要取整 往大的取整（Math.ceil(计算的内容)） 往小的取整（Math.floor(计算的内容)）
5.判断步长值为正的还是负的，正的就往大的取整，负的就往小的取整

匀速动画就是 盒子是当前的位置 + 固定的值
缓动动画就是 盒子当前的位置 + 变化的值（目标值 - 现在的位置）/ 10

动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置。