一、元素偏移量 offset 系列（更改元素樣式style同級(jí)）
1.offset的作用
offset 翻譯過來就是偏移量， 我們使用 offset系列相關(guān)屬性可以動(dòng)態(tài)地得到該元素的位置（偏移）、大小等。
（1）. 獲得元素距離帶有定位父元素的位置。父級(jí)都沒有定位，則以文檔為標(biāo)準(zhǔn)?。。。。?！
（2）. 獲得元素自身的大小（寬度高度）
（3）. 注意：返回的數(shù)值都不帶單位
2.offset的常用屬性
- 五個(gè)都是重點(diǎn)：
image.png
注意：
（1）子節(jié)點(diǎn).parentNode返回的是親爹元素
（2）元素對(duì)象.offsetParent返回的是最近的帶有定位的父元素
3.offset與style的區(qū)別
offset:
（1）offset 可以獲取任意樣式表中的樣式值
（2）offset 系列獲得的數(shù)值是沒有單位的
（3）offsetWidth 包含padding+border+width
（4）offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
style:
（1）style 只能獲取行內(nèi)樣式表中的樣式值（但可以更改任意樣式表的樣式值）
（2）style.width 獲得的是帶有單位的字符串
（3）style.width 獲得不包含padding和border 的值
（4）style.width 是可讀寫屬性，可以獲取也可以賦值
總結(jié)：
（1）獲取元素大小、位置，用offset更合適
（2）更改元素的值，則需要用style改變
二、元素可視區(qū) client 系列
1.概述
client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。
2.client系列的屬性
注意：client可以獲得元素的邊框?qū)挾?、元素除去邊框后的大小（包括padding和width）
3.立即執(zhí)行函數(shù)
格式：（ function() {} ）() 或者 （ function() {} () ）
特點(diǎn)：
（1）無需調(diào)用，直接執(zhí)行。
（2）可以匿名也可以有名字。
作用：獨(dú)立創(chuàng)建了一個(gè)作用域，里面的變量都是局部變量，不會(huì)有命名沖突。
// 方法1
(function(a,b){
console.log(a + b);
})(1,2);//第二個(gè)小括號(hào)相當(dāng)于調(diào)用函數(shù)
// 方法2
(function(c){
console.log(c);
}(5));
三、元素滾動(dòng) scroll 系列
1.概述
scroll 翻譯過來就是滾動(dòng)的，我們使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。
2.scroll的屬性
注意：
（1）元素.scrollWidth與元素.clientWidth一樣，返回的也是元素的寬度，包
含padding和width，不包含border。
（2）不同的是，當(dāng)元素內(nèi)的文本超出時(shí)，元素.scrollWidth返回的元素高度會(huì)跟著變大。
3.頁(yè)面被卷去的頭部
如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個(gè)頁(yè)面時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。當(dāng)滾動(dòng)條向下滾動(dòng)時(shí)，頁(yè)面上面被隱藏掉的高度，我們就稱為頁(yè)面被卷去的頭部。滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā) onscroll事件。
注意：
頁(yè)面被卷去的上側(cè)距離：window.pageYOffset（window.pageXOffset）
元素被卷去的頭部長(zhǎng)度：元素對(duì)象.scrollTop（元素對(duì)象.scrollLeft）
4.scroll事件
可以為元素添加scroll事件，當(dāng)元素的滾動(dòng)條滾動(dòng)時(shí)會(huì)觸發(fā)事件。
<div>
漢皇重色思傾國(guó) 御宇多年求不得 楊家有女初長(zhǎng)成 養(yǎng)在深閨人未識(shí) 天生麗質(zhì)難自棄
一朝選在君王側(cè) 回眸一笑百媚生 六宮粉黛無顏色 春寒賜浴華清池 溫泉水華西凝脂
侍兒扶起嬌無力 始是新承恩澤時(shí)
</div>
<script>
// 1.獲取事件源
var div = document.querySelector('div');
// 2.注冊(cè)監(jiān)聽事件 程序處理
div.addEventListener('scroll', function () {
console.log(div.scrollTop);
});
</script>
四、三大系列對(duì)比
他們的主要用法：
1.offset 經(jīng)常用于獲得元素位置（到最近的有定位父元素的距離） offsetLeft offsetTop
2.client經(jīng)常用于獲取元素大小（不包含邊框） clientWidth clientHeight
3.scroll 經(jīng)常用于獲取滾動(dòng)距離 scrollTop scrollLeft
4.注意: 頁(yè)面滾動(dòng)的距離通過 window.pageXOffset 獲得
五、mouseenter 和mouseover的區(qū)別
1.相同點(diǎn)：當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)就會(huì)觸發(fā)mouseenter 事件
2.不同點(diǎn)：
①mouseover 鼠標(biāo)經(jīng)過自身盒子會(huì)觸發(fā)，經(jīng)過子盒子還會(huì)觸發(fā)。
②mouseenter 只有經(jīng)過自身盒子觸發(fā)
3.原因：mouseover會(huì)冒泡 ，mouseenter不會(huì)冒泡
4.搭配：mouseover搭配mouseout都會(huì)冒泡；mouseenter搭配mouseleave都不冒泡。
