JS中的offset scroll event client

1、offset

通常用來檢測盒子的偏移、位移，都是隻讀屬性，不能賦值

• offsetWidth和offsetHeight表示的是：調用者盒子的寬和高，包括盒子自身的padding和border
• offsetTop和offsetLeft是調用者的盒子距離有定位的父盒子頂部和左側的長度。若是父盒子都沒有定位，就以body爲準，若是調用者自身沒有top和left時，從父盒子的padding開始計算，不包括border

2、scroll

各類特效和動畫中用的比較多，表示在頁面滑動的過程當中，捲起的部分

• scrollWidth和scrollHeight表示的是調用元素的所有寬度和高度，內容超出也會被算入，包括padding，不包括border和margin，即 scrollWidth = width + padding
• scrollTop和scrollLeft表示的是瀏覽器在滑輪滑動以後,被遮住的頂部和左側長度

   1 function scroll() {
   2     //判斷返回值是否是undefined
   3     if (window.pageXOffset !== undefined) {
   4         return {
   5             "top": window.pageYOffset,
   6             "left": window.pageXOffset
   7         }
   8     }else if (document.documentElement === "CSS1Compat") {
   9         return {
  10             "top": document.documentElement.offsetTop,
  11             "left": document.documentElement.offsetLeft
  12         }
  13     }else {
  14         return {
  15             "top": document.body.offsetTop,
  16             "left": document.body.offsetLeft
  17         }
  18     }
  19 
  20     // return {         //簡寫
  21     //     "top": window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
  22     //     "left": window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft
  23     // }
  24 }
  有了這樣的封裝函數就能夠更簡單的獲得元素在頁面或瀏覽器中的位置
  var pagey = event.pageY || scroll().top + event.clientY;             //後邊是兼容性的寫法,被遮擋高度 + 元素距瀏覽器高度
  
  

  這是封裝的一個獲取scrollTop和scrollLeft的兼容性寫法,documentElement調用的是支持DTD,body調用的不支持DTD,pageYoffset方法是谷歌火狐IE9都支持的方法

判斷當前是否聲明DTD的方法:

document.compatMode === "BackCompat";    //未聲明DTD
document.compatMode === "CSS1Compat";    //已聲明DTD

 

3、event

 DOM中的事件,而事件處理函數能夠附加在DOM、window這些對象上。在事件發生的時候，event對象會被建立並依次傳遞給事件監聽器，以前已經說過建立事件監聽器的方法addEventListener() 要注意的是，在IE舊版本里使用的是attchEvent()這種效果相同的方法，也能夠以此寫出兼容性的寫法。

• 在處理函數中，能夠將event做爲形參傳入，來訪問一些Event接口，兼容性寫法如：

  1 function method(event) {
  2     event = event || window.event;
  3 }

  還有好多東西等我之後慢慢發掘,如今還不知道這個裏邊有什麼樣的奇淫技巧

• 事件傳播的三個階段：
  • 捕獲：從最上一級往下查找，直到找到目標事件
  • 冒泡：從目標事件開始向上層冒泡，直到最上一級
  • 目標：執行事件的代碼

4、client

clientWidth：盒子的可見寬度，不包括border和margin  故clientWidth = padding + width

clientHeight：同上

clientTop：盒子上邊框的border（喵喵喵？？？）

clientLeft：同上

區別：

clientWidth = width + border

offsetWidth = width + padding + border

scrollWidth = 內容的寬度（不含border）

 

clientTop：由event事件調用   表明border的寬

offsetTop：由任意元素調用，但通常是盒子   表明此盒子距離有定位的父盒子的距離

scrollTop：由window調用，盒子也能夠調用，但要有滾動條    表明被捲去的高度