- BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
- DOM和BOM的区别：
1）DOM是文档对象模型，顶级对象是document，主要学习的是操作页面元素。是W3c标准规范。
2）BOM是浏览器对象模型，，顶级对象是window。bom学习浏览器窗口交互一些对象。
3）BOM 比 DOM 更大，它包含 DOM。
window对象：
- window.onload = function() {}或者window.addEventListener(“load”,function(){})只能写一个，后面顶替前面的
- document.addEventListener(‘DOMContentLoad’,function(){})可以写多个
- 调整窗口大小事件：只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度*
1）window.onresize = function(){}
- window.addEventListener(“resize”,function(){})
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数
- 定时器：1）window.setTimeout(调用函数, 延时时间) ，
2） window.setInterval(调用函数, 延时时间); - 停止计时器：clearinterval()
location对象：
navigator对象
history对象
- js 是单线程，同一个时间只能做一件事。
- 同步前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的
元素偏移量offSet系列
1）. 获得元素距离带有定位父元素的位置
2）. 获得元素自身的大小（宽度高度）
3）. 注意：返回的数值都不带单位
元素可视区client系列
元素滚动scroll系列
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得
mouseenter 和mouseover的区别
- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
- 之所以这样，就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
动画函数封装
- 核心原理：通过定时器 setInterval() 不断移动盒子位置。
- 实现步骤：
1）. 获得盒子当前位置
2）. 让盒子在当前位置加上1个移动距离
3）. 利用定时器不断重复这个操作
4）. 加一个结束定时器的条件
5）. 注意此元素需要添加定位，才能使用element.style.left
3. 缓动动画函数：核心算法(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
4. 动函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置
5. 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量var flag= true;
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头
触屏事件
3. touches 正在触摸屏幕的所有手指的列表
4. targetTouches 正在触摸当前DOM元素的手指列表
5. targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
6. changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
7. 拖动元素三步曲：
（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
（3） 离开手指 touchend
classList 属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加，移除及切换 CSS 类。有以下方法
添加类：
element.classList.add（’类名’）；
focus.classList.add('current');
移除类：
element.classList.remove（’类名’）;
focus.classList.remove('current');
切换类：
element.classList.toggle（’类名’）;
focus.classList.toggle('current');
注意:以上方法里面，所有类名都不带点
click 延时解决方案
- 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟
- 利用touch事件自己封装这个事件解决300ms 延迟。
原理就是：
(1). 当我们手指触摸屏幕，记录当前触摸时间
(2). 当我们手指离开屏幕， 用离开的时间减去触摸的时间
(3) 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击
//封装tap，解决click 300ms 延时
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });
- 使用插件。fastclick 插件解决300ms 延迟
本地存储
本地存储特性
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据sessionStorage.setItem(key, value)；
获取数据sessionStorage.getItem(key)
删除数据sessionStorage.removeItem(key)
清除数据sessionStorage.clear()
window.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
