前端知識點總結——BOM

前端知識點總結——BOM

1.BOM: Browser Object Model

什麼是: 專門操做瀏覽器窗口的API
沒有標準, 致使瀏覽器兼容性問題
包括:
window
history
location
navigator
dom
event
screen

2.window:

屬性: .innerWidth, .innerHeight 瀏覽器窗口中，文檔顯示區的寬和高
方法: .open() .close() .open("url","name")

三種:

1.在當前窗口打開，可後退: .open("url","_self")
    2.在新窗口打開，可打開多個: .open("url","_blank")
    3.在新窗口打開，只能打開一個: 
      .open("url","自定義窗口名")

3.history: 保存當前窗口打開後，成功訪問過的url的歷史記錄棧

在當前窗口中，每訪問一個新url，都會將新url壓入history
API: history.go(n)

3種:

前進: history.go(1)  
 後退: history.go(-1)  
 刷新: history.go(0)

4.location: 保存當前窗口正在打開的url的對象

屬性:
.href 完整url地址
.protocol 協議
.host 主機名+端口號
.hostname 主機名
.port 端口號
.pathname 相對路徑
.hash #錨點地址
.search ?查詢字符串

方法:

1. 在當前窗口打開，可後退:
   location.assign(url) => location.href=url => location=url
2. 在當前窗口打開，禁止後退:
   location.replace(url)

3. 從新加載頁面: 刷新: 2種:

   1. 普通刷新:
      優先從瀏覽器本地緩衝獲取資源:
      F5
      history.go(0)
      location.reload(/false/)
   2. 強制刷新:
      不管本地是否有緩存，老是強制從服務器獲取資源
      location.reload(true)

5.定時器: 2種:

1. 週期性定時器:
   什麼是: 讓程序每隔指定的時間間隔，反覆執行一項任務
   什麼時候: 只要讓程序按照指定的時間間隔，自動執行一項任務
   如何: 3件事:
   1.任務函數: 讓定時器反覆執行的任務
   2.啓動定時器: timer=setInterval(task, interval)

   讓程序，每隔interval 毫秒自動執行一次task任務

   3.中止定時器: clearInterval(timer)

   timer: 定時器的序號, 在內存中惟一標識定時器的整數
    專門用於中止定時器
    如何得到: 只能在啓動定時器時得到。
    什麼時候: 只要一個定時器可能被中止，就要在啓動時，先保存定時器序號
    好的習慣: 在clearInterval以後，手動清除timer中殘留的序號: timer=null;

   中止定時器: 2種狀況:

   1. 用戶手動中止:
   2. 定時器可自動中止:
      在任務函數中，設定臨界值，若是沒有達到臨界值，則繼續執行任務，不然，若是達到臨界值，就自動調用clearInterval

2.一次性定時器:
什麼是: 讓程序先等待一段時間，再執行一次任務。執行後，自動中止。
什麼時候: 只要讓程序延遲執行一件事時
如何: 3件事:
1.task
2.啓動定時器: timer=setTimeout(task,wait)

讓程序等待wait毫秒後，自動執行一次task，執行後自動中止

3.中止定時器: clearTimeout(timer)

6.定時器原理:

定時器中的任務函數，必須等待主程序全部語句執行後，才能執行。

7.navigator:

1.什麼是: 保存瀏覽器配置信息的對象
包括:
.cookieEnabled: 判斷當前瀏覽器是否啓用cookie

2.什麼是cookie: 在客戶端持久存儲用戶私密數據的小文件
爲何: 內存中全部數據都是臨時的! 程序關閉，內存中一切變量都釋放!
什麼時候: 只要但願在客戶端持久保存數據，都用cookie
.plugins: 包含瀏覽器全部插件信息的集合

3.什麼是插件: 爲瀏覽器添加新功能的小軟件

如何判斷是否安裝指定插件:

.userAgent: 保存瀏覽器名稱和版本號的字符串
什麼時候: 只要判斷瀏覽器名稱和版本號

8.event:

什麼是事件: 人爲觸發的，或瀏覽器自動觸發的頁面內容狀態的改變。
什麼是事件處理函數: 當事件發生時，自動執行的函數。
如何綁定: 3種:

1. 在HTML中綁定:
   綁定: <ANY on事件名="js語句">
   當事件發生時: 自動執行js語句
   問題: 不符合內容與行爲分離的原則，不便於維護和重用
   可是: 在組件開發中，反而要求內容，行爲和樣式集中定義在一個小組件內，自成體系。
2. 在js中綁定, 每一個事件只能綁定一個處理函數:
   ANY.on事件名=function(){ ... }
   當事件發生時: ANY.on事件名() //this->ANY
   問題: 用賦值方式綁定事件處理函數
3. 在js中綁定，每一個事件可綁定多個處理函數:
   ANY.addEventListener('事件名',handler)
   在瀏覽器中爲ANY元素的指定事件，添加一個事件監聽對象。將事件監聽對象加入到瀏覽器的監聽隊列中。
   觸發事件時: 瀏覽器會遍歷監聽隊列中的每一個監聽對象，找到觸發事件元素上對應事件的監聽對象，調用其處理函數
   移除事件監聽:
   ANY.removeEventListener('事件名',handler)
   說明: handler必須是綁定時使用的原函數對象
   強調: 若是一個處理函數，有可能被移除，則不能使用匿名函數綁定。應使用有名的函數綁定

9.DOM事件模型:

什麼是: 從事件觸發處處理函數執行，所通過的過程
3個階段:

1. 捕獲capture: 由外向內，記錄各級父元素上綁定的事件處理函數。——僅記錄，不觸發!
2. 目標觸發: 優先觸發實際點擊的元素上綁定的處理函數
3. 冒泡執行: 由內向外，按捕獲階段記錄的處理函數的倒序，依次執行父元素上的處理函數。

10.事件對象:

什麼是: 當事件發生時，自動建立的，封裝事件信息的對象
什麼時候: 只要但願得到事件信息，或修改事件的默認行爲時
如何獲取: 事件對象默認老是以處理函數第一個參數，自動傳入
如何使用:

1. 取消冒泡: e.stopPropagation()

2. 利用冒泡:
   優化: 儘可能減小事件監聽的個數
   爲何: 瀏覽器查找事件監聽，採用的是遍歷的方式

   事件監聽多，瀏覽器查找就慢

   什麼時候: 若是對多個子元素綁定相同事件時，都要利用冒泡
   如何: 只要在父元素綁定一次，全部子元素共用便可!
   2個難題:

   1. 得到目標元素:
     目標元素: 最初實際觸發事件的當前元素
     如何得到: 
      錯誤: this->父元素
      正確: e.target
   2. 篩選目標元素:
     好比: 經過nodeName, class, 內容。。。

3. 阻止默認行爲:
   什麼時候: 只要事件的默認行爲不是想要的
   如何: e.preventDefault();
   什麼時候:

   1. 用a當按鈕時，a會自動向地址欄中添加#錨點地址。
   2. 提交表單時，若是驗證沒經過，可阻止提交
      自定義表單提交:
      input button + onclick + form.submit
      input submit + form.onsubmit事件 + e.preventDefault()
   3. HTML5中拖拽API: 首先要阻止瀏覽器默認的拖拽行爲

11.鼠標座標: 3組:

1. 相對於屏幕左上角: e.screenX,  e.screenY
2. 相對於文檔顯示區左上角: e.clientX,  e.clientY
3. 相對於當前元素左上角:  e.offsetX,   e.offsetY

12.頁面滾動:

事件: window.onscroll
得到頁面滾動過的高度: body頂部超出文檔顯示區頂部的距離

scrollTop=document.documentElement.scrollTop
        ||document.body.scrollTop;

滾動API: window.scrollTo(left, top) window.scrollBy(left的增量,top的增量)