JavaScript中的三大家族

offset家族 （只讀屬性）

• offsetParent 偏移的父元素
• offsetWidth 當(dāng)前元素的寬度 （包含填充和邊框）
• offsetHeight 當(dāng)前元素的高度 （包含填充和邊框）
• offsetLeft 基于偏移的父元素的左偏移量
• offsetTop 基于偏移的父元素的上偏移量

client家族 （只讀屬性）

• clientWidth 當(dāng)前元素的寬度 （包含填充不包含邊框）
• clientHeight 當(dāng)前元素的高度 （包含填充不包含邊框）
• clientTop 離上面的邊框的距離
• clientLeft 離左邊的邊距的距離

scroll家族

• scrollTop 滾動(dòng)欄離上面的距離 (可以設(shè)置的)
• scrollLeft 滾動(dòng)欄離左邊的距離 (可以設(shè)置的)
• scrollWidth 當(dāng)前的元素的寬度 （包含填充和滾動(dòng)欄距離）
• scrollHeight 當(dāng)前的元素的高度 （包含填充和滾動(dòng)欄距離）

事件監(jiān)聽器 （eventListener）

事件監(jiān)聽器，使用了觀察者模式（observer）。它是添加事件的一種方式。

重點(diǎn)方法

• addEventListener 添加事件監(jiān)聽器
• removeEventListener 移除事件監(jiān)聽器

eventListener和屬性指定事件的區(qū)別

• eventListener 一個(gè)事件可以指定多個(gè)處理函數(shù)，屬性會(huì)覆蓋
• eventListener 可以設(shè)置是否捕獲 屬性指定不行
• eventListener 添加的事件可以被移除 屬性指定只能重新賦值為null進(jìn)行移除
• eventListener 添加的事件名可以任意書寫，由dispatchEvent來觸發(fā)

拖拽

拖拽的相關(guān)事件

• 按下事件（mousedown）
• 移動(dòng)事件 （mousemove）
• 彈起事件 （mouseup）

全局拖拽

思路

• 給拖拽的元素添加按下事件
• 在按下事件中記錄鼠標(biāo)在元素的位置（offsetX、offsetY）
• 在按下事件內(nèi)容給全局(document)添加移動(dòng)事件
• 在全局的移動(dòng)事件內(nèi)記錄每次移動(dòng)的位置
• 用移動(dòng)的位置減去按下的位置得到對(duì)應(yīng)的定位的位置
• 在全局的移動(dòng)事件內(nèi)設(shè)置元素的定位
• 在按下的事件內(nèi)容給全局（document）添加彈起事件
• 在彈起事件內(nèi)釋放對(duì)應(yīng)的移動(dòng)事件和彈起事件