一、元素偏移量 offset 系列（更改元素样式style同级）
1.offset的作用
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。
（1）. 获得元素距离带有定位父元素的位置。父级都没有定位，则以文档为标准！！！！！！
（2）. 获得元素自身的大小（宽度高度）
（3）. 注意：返回的数值都不带单位
2.offset的常用属性
- 五个都是重点：
image.png
注意：
（1）子节点.parentNode返回的是亲爹元素
（2）元素对象.offsetParent返回的是最近的带有定位的父元素
3.offset与style的区别
offset:
（1）offset 可以获取任意样式表中的样式值
（2）offset 系列获得的数值是没有单位的
（3）offsetWidth 包含padding+border+width
（4）offsetWidth 等属性是只读属性，只能获取不能赋值
style:
（1）style 只能获取行内样式表中的样式值（但可以更改任意样式表的样式值）
（2）style.width 获得的是带有单位的字符串
（3）style.width 获得不包含padding和border 的值
（4）style.width 是可读写属性，可以获取也可以赋值
总结：
（1）获取元素大小、位置，用offset更合适
（2）更改元素的值，则需要用style改变
二、元素可视区 client 系列
1.概述
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2.client系列的属性
注意：client可以获得元素的边框宽度、元素除去边框后的大小（包括padding和width）
3.立即执行函数
格式：（ function() {} ）() 或者 （ function() {} () ）
特点：
（1）无需调用，直接执行。
（2）可以匿名也可以有名字。
作用：独立创建了一个作用域，里面的变量都是局部变量，不会有命名冲突。
// 方法1
(function(a,b){
console.log(a + b);
})(1,2);//第二个小括号相当于调用函数
// 方法2
(function(c){
console.log(c);
}(5));
三、元素滚动 scroll 系列
1.概述
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
2.scroll的属性
注意：
（1）元素.scrollWidth与元素.clientWidth一样，返回的也是元素的宽度，包
含padding和width，不包含border。
（2）不同的是，当元素内的文本超出时，元素.scrollWidth返回的元素高度会跟着变大。
3.页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。
注意：
页面被卷去的上侧距离：window.pageYOffset（window.pageXOffset）
元素被卷去的头部长度：元素对象.scrollTop（元素对象.scrollLeft）
4.scroll事件
可以为元素添加scroll事件，当元素的滚动条滚动时会触发事件。
<div>
汉皇重色思倾国 御宇多年求不得 杨家有女初长成 养在深闺人未识 天生丽质难自弃
一朝选在君王侧 回眸一笑百媚生 六宫粉黛无颜色 春寒赐浴华清池 温泉水华西凝脂
侍儿扶起娇无力 始是新承恩泽时
</div>
<script>
// 1.获取事件源
var div = document.querySelector('div');
// 2.注册监听事件 程序处理
div.addEventListener('scroll', function () {
console.log(div.scrollTop);
});
</script>
四、三大系列对比
他们的主要用法：
1.offset 经常用于获得元素位置（到最近的有定位父元素的距离） offsetLeft offsetTop
2.client经常用于获取元素大小（不包含边框） clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意: 页面滚动的距离通过 window.pageXOffset 获得
五、mouseenter 和mouseover的区别
1.相同点：当鼠标移动到元素上时就会触发mouseenter 事件
2.不同点：
①mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
②mouseenter 只有经过自身盒子触发
3.原因：mouseover会冒泡 ，mouseenter不会冒泡
4.搭配：mouseover搭配mouseout都会冒泡；mouseenter搭配mouseleave都不冒泡。
