前端知識點總結——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 ?查詢字符串

方法:

在當前窗口打開，可后退:

location.assign(url) => location.href=url => location=url

在當前窗口打開，禁止后退:

location.replace(url)

重新加載頁面: 刷新: 2種:

普通刷新:

優先從瀏覽器本地緩沖獲取資源:

F5

history.go(0)

location.reload(/false/)

強制刷新:

無論本地是否有緩存，總是強制從服務器獲取資源

location.reload(true)

5.定時器: 2種:

周期性定時器:

什么是: 讓程序每隔指定的時間間隔，反復執行一項任務

何時: 只要讓程序按照指定的時間間隔，自動執行一項任務

如何: 3件事:

1.任務函數: 讓定時器反復執行的任務

2.啟動定時器: timer=setInterval(task, interval)

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

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

timer: 定時器的序號, 在內存中唯一標識定時器的整數

專門用于停止定時器

如何獲得: 只能在啟動定時器時獲得。

何時: 只要一個定時器可能被停止，就要在啟動時，先保存定時器序號

好的習慣: 在clearInterval之后，手動清除timer中殘留的序號: timer=null;

停止定時器: 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種:

在HTML中綁定:

綁定:

當事件發生時: 自動執行js語句

問題: 不符合內容與行為分離的原則，不便于維護和重用

但是: 在組件開發中，反而要求內容，行為和樣式集中定義在一個小組件內，自成體系。

在js中綁定, 每個事件只能綁定一個處理函數:

ANY.on事件名=function(){ ... }

當事件發生時: ANY.on事件名() //this->ANY

問題: 用賦值方式綁定事件處理函數

在js中綁定，每個事件可綁定多個處理函數:

ANY.addEventListener('事件名',handler)

在瀏覽器中為ANY元素的指定事件，添加一個事件監聽對象。將事件監聽對象加入到瀏覽器的監聽隊列中。

觸發事件時: 瀏覽器會遍歷監聽隊列中的每個監聽對象，找到觸發事件元素上對應事件的監聽對象，調用其處理函數

移除事件監聽:

ANY.removeEventListener('事件名',handler)

說明: handler必須是綁定時使用的原函數對象

強調: 如果一個處理函數，有可能被移除，則不能使用匿名函數綁定。應使用有名的函數綁定

9.DOM事件模型:

什么是: 從事件觸發到處理函數執行，所經過的過程

3個階段:

捕獲capture: 由外向內，記錄各級父元素上綁定的事件處理函數。——僅記錄，不觸發!

目標觸發: 優先觸發實際點擊的元素上綁定的處理函數

冒泡執行: 由內向外，按捕獲階段記錄的處理函數的倒序，依次執行父元素上的處理函數。

10.事件對象:

什么是: 當事件發生時，自動創建的，封裝事件信息的對象

何時: 只要希望獲得事件信息，或修改事件的默認行為時

如何獲取: 事件對象默認總是以處理函數第一個參數，自動傳入

如何使用:

取消冒泡: e.stopPropagation()

利用冒泡:

優化: 盡量減少事件監聽的個數

為什么: 瀏覽器查找事件監聽，采用的是遍歷的方式

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

何時: 如果對多個子元素綁定相同事件時，都要利用冒泡

如何: 只要在父元素綁定一次，所有子元素共用即可!

2個難題:

1. 獲得目標元素:

目標元素: 最初實際觸發事件的當前元素

如何獲得:

錯誤: this->父元素

正確: e.target

2. 篩選目標元素:

比如: 通過nodeName, class, 內容。。。

阻止默認行為:

何時: 只要事件的默認行為不是想要的

如何: e.preventDefault();

何時:

用a當按鈕時，a會自動向地址欄中添加#錨點地址。

提交表單時，如果驗證沒通過，可阻止提交

自定義表單提交:

input button + onclick + form.submit

input submit + form.onsubmit事件 + e.preventDefault()

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的增量)

總結

以上是生活随笔為你收集整理的bom event周期_前端知识点总结——BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。