offset家族
offset自己的
目的：js中有一套方便的獲取元素尺寸的辦法就是offset家族；
得到對象的寬度和高度(自己的，與他人無關(guān))
offsetWidth=width+ border+padding
div {width:220px;border-left:2px solid red; padding:10px;}
div.offsetWidth =220 + 2 + 20
為什么不用div.style.width因?yàn)闁|西只能得到行內(nèi)的數(shù)值
返回距離上級盒子（最近的帶有定位）左邊的位置
如果父級都沒有定位則以body為準(zhǔn)
這里的父級指的是所有上一級不僅僅指的是父親還可以是爺爺曾爺爺曾曾爺爺。。。。
.
從父級的padding開始算父親的border不算
總結(jié)一下：就是子盒子到定位的父盒子邊框到邊框的距離
返回改對象的父級（帶有定位）不一定是親的爸爸
前面學(xué)過一個(gè)返回父親(親的)parentNode有所區(qū)別
如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body。
2、如果當(dāng)前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級元素。
varson =document.getElementById("son");
//alert(son.parentNode.id);
alert(son.offsetParent.tagName);// tagName標(biāo)簽的名字
1.1.4offsetTop style.top的區(qū)別
一、最大區(qū)別在于offsetLeft可以返回沒有定位盒子的距離左側(cè)的位置。而style.top不可以只有定位的盒子才有l(wèi)efttop right
二、offsetTop返回的是數(shù)字，而style.top返回的是字符串，除了數(shù)字外還帶有單位：px。
style.left = 300pxparseInt（300px）結(jié)果300
parseInt（style.left）+ parseInt（style.left）
三、offsetTop只讀，而style.top可讀寫。
四、如果沒有給HTML元素指定過top樣式，則style.top返回的是空字符串。
五、最重要的區(qū)別style.left只能得到行內(nèi)樣式offsetLeft隨便
我們學(xué)過一些事件:onmouseoveronmouseoutonclick .....
btn.onclick =function(event) {語句}
event單詞翻譯過來事件的意思
event就是事件的對象指向的是事件是onclick
再觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對象event，這個(gè)對象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對象，但支持的方式不同。
比如鼠標(biāo)操作時(shí)候，會(huì)添加鼠標(biāo)位置的相關(guān)信息到事件對象中。
普通瀏覽器支持event
ie 678支持window.event
所以我們采取兼容性的寫法：
varevent=event||window.event;
1.2.1event常見屬性
屬性
作用
data
返回拖拽對象的URL字符串（dragDrop）
width
該窗口或框架的高度
height
該窗口或框架的高度
pageX
光標(biāo)相對于該網(wǎng)頁的水平位置（ie無）
pageY
光標(biāo)相對于該網(wǎng)頁的垂直位置（ie無）
screenX
光標(biāo)相對于該屏幕的水平位置
screenY
光標(biāo)相對于該屏幕的垂直位置
target
該事件被傳送到的對象
type
事件的類型
clientX
光標(biāo)相對于該網(wǎng)頁的水平位置（當(dāng)前可見區(qū)域）
clientY
光標(biāo)相對于該網(wǎng)頁的水平位置
1.2.2pageXclientXscreenX區(qū)別
screen XscreenY
是以我們的電腦屏幕為基準(zhǔn)點(diǎn)測量
pageXpageY
以我們的文檔（絕對定位）的基準(zhǔn)點(diǎn)對齊
ie678不認(rèn)識
clientXclientY
以可視區(qū)域?yàn)榛鶞?zhǔn)點(diǎn)類似于固定定位
onmouseoveronmouseoutonclick
onmousemove當(dāng)鼠標(biāo)移動(dòng)的時(shí)候就是說，鼠標(biāo)移動(dòng)一像素就會(huì)執(zhí)行的事件
div.onmousemove
= function() {語句}
當(dāng)鼠標(biāo)再div身上移動(dòng)的時(shí)候，就會(huì)執(zhí)行。
得到在某個(gè)盒子內(nèi)的坐標(biāo)：
div.onmouseover和div.onmousemove區(qū)別
他們相同點(diǎn)都是經(jīng)過div才會(huì)觸發(fā)
div.onmouseover只觸發(fā)一次
div.onmousemove每移動(dòng)一像素，就會(huì)觸發(fā)一次
onmouseup當(dāng)鼠標(biāo)彈起
onmousedown當(dāng)鼠標(biāo)按下的時(shí)候
1.拖動(dòng)原理==鼠標(biāo)按下接著移動(dòng)鼠標(biāo)。
bar.onmousedown =function(){
document.onmousemove = function(){
}
}
2.當(dāng)我們按下鼠標(biāo)的時(shí)候，就要記錄當(dāng)前鼠標(biāo)的位置-大盒子的位置
算出bar當(dāng)前在大盒子內(nèi)的距離。
