JS四大家族
三大系列：
offset、
scroll、
client
事件對象：
event（事件被觸動時，鼠標和鍵盤的狀態）（通過屬性控制）
三大系列都是
以DOM元素節點的屬性形式存在的。
類比訪問關系，也是以屬性形式存在。
不同點在於，訪問關系是為了獲取其他節點，而三大系列是為了獲取元素節點更多的信息。
1. offset 系列
offset：偏移、補償、位移
offset 系列是 js 中的一套獲取元素尺寸的便捷辦法。
（1）
offsetWidth 和 offsetHeight （檢測盒子自身寬高+padding+border）
這兩個屬性，他們綁定在了所有的節點元素上。獲取之后，只要調用這兩個屬性，我們就能夠獲取元素節點的寬和高。
行內式、內嵌式、外鏈式都可以獲取到。
offsetWidth = width + padding + border；
offsetHeight = Height + padding + border；
不包括margin。
（2）
offsetLeft 和 offsetTop （檢測距離父盒子有定位的左/上面的距離）
返回距
上級盒子中帶有定位的盒子左邊和上邊的距離。和盒子本身有無定位無關。
如果
父級都沒有定位則以 body 為准。
offsetLeft 從父級的 padding 開始算，父級的 border 不算。
在父盒子有定位的情況下，offsetLeft == style.left (去掉px)
（3）
offsetParent （檢測父系盒子中帶有定位的父盒子節點）（極少用）
① 返回該對象帶有定位的父級
② 如果當前元素的父級元素沒有CSS定位（position為absolute / relative / fixed）， offsetParent為body；如果當前元素的父級元素中有CSS定位（position為absolute / relative / fixed），offsetParent 取最近的那個有定位的父級元素。
和盒子本身有無定位無關。
（4）
offsetLeft 和 style.left 區別
① 最大區別在於offsetLeft 可以返回沒有定位盒子的距離左側的位置。 而 style.left不可以。
②
offsetLeft 返回的是數字，而
style.left 返回的是字符串，除了數字外還帶有單位：px。
③
offsetTop 只讀，而 style.top 可讀寫。（只讀是獲取值，可寫是賦值）
④ 如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串。
（style.left在等號的左邊和右邊還不一樣。左邊的時候是屬性，右邊的時候是值。）
2. Scroll 系列
（1）
ScrollWidth 和 scrollHeight（不包括border）
檢測盒子的寬高。（調用者：節點元素。屬性。）
盒子內容的寬高。（如果有內容超出了，顯示內容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
（2）
scrollTop 和 scrollLeft
網頁，被瀏覽器遮擋的頭部和左邊部分。
被卷去的頭部和左邊部分。
（3）
有兼容性問題
① 未聲明 DTD 時（谷歌只認識他）
document.body.scrollTop
② 已經聲明DTD 時（IE678只認識他）
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
window.pageYOffset
（4）
兼容寫法
- var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
- var aaa = document.documentElement.scrollTop + document.body.scrollTop;
3. client 系列
（1）
clientWidth 和 clientHeight
clientWidth：獲取網頁可視區域寬度（兩種用法）
clientHeight：獲取網頁可視區域高度（兩種用法）
調用者不同，意義不同：
盒子調用，指盒子本身；body/html調用，指可視區域大小。
（2）
clientX 和 clientY
clientX：鼠標距離可視區域左側距離（event調用）
clientY：鼠標距離可視區域上側距離（event調用）
（3）
clientTop 和 clientLeft
獲取盒子的 border 寬高
4. event 事件對象
（1）
概述
在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含着所有與事件有關的信息。
所有瀏覽器都支持event對象，但支持的方式不同。
比如鼠標操作時候，會添加鼠標位置的相關信息到事件對象中。（類似Date）
普通瀏覽器支持 event（帶參，任意參數）
ie 678 支持 window.event（無參，內置）
總結：他是一個事件中的內置對象。內部裝了很多關於鼠標和事件本身的信息。
（2）
事件對象
event 的獲取
IE678中，window.event
在火狐谷歌中，event或者，在事件綁定的函數中，加參，這個參數就是event.
Box.onclick = function (aaa){ aaa就是event }
（3）
兼容獲取方式有兩種：
不寫參數直接使用event;
寫參數，但是參數為event
var event = event || window.event;(主要用這種)
（4）
event 重要內容
（5）
screenX、pageX 和 clientX 的區別
pageY/pageX: 鼠標位於整個網頁頁面的頂部和左側部分的距離。（頁面）
pcreenY/screenX: 鼠標位於屏幕的上方和左側的距離。（屏幕）
clientX/clientY: 鼠標位於瀏覽器的左側和頂部的距離。（瀏覽器大小和位置）
（6）
pageY 和 pageX 的兼容寫法
在頁面的位置 = 看得見的 + 看不見的
- pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
5. 三大家族區別（總結）
（1）
Width 和 height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內容寬度（不包含border）
scrollHeight = 內容高度（不包含border）
（2）
top 和 left
offsetTop/offsetLeft ：
調用者：任意元素。(盒子為主)
作用：距離父系盒子中帶有定位的距離。
scrollTop/scrollLeft:(盒子也可以調用，必須有滾動條)
調用者：document.body.scrollTop/.....(window)
作用：瀏覽器無法顯示的部分（被卷去的部分）
clientY/clientX:（clientTop/clientLeft 值的是border）
調用者：event.clientX(event)
作用：鼠標距離瀏覽器可視區域的距離（左、上）
6. 獲得屏幕寬高
- window.screen.width
- window.screen.height
分辨率是屏幕圖像的精密度，指顯示器所能顯示的像素有多少。