前端知識點總結(jié)——BOM

1.BOM: Browser Object Model

什么是: 專門操作瀏覽器窗口的API

沒有標(biāo)準(zhǔn), 導(dǎo)致瀏覽器兼容性問題

包括:

window

history

location

navigator

dom

event

screen

2.window:

屬性: .innerWidth, .innerHeight 瀏覽器窗口中，文檔顯示區(qū)的寬和高

方法: .open() .close() .open("url","name")

三種:

1.在當(dāng)前窗口打開，可后退: .open("url","_self")

2.在新窗口打開，可打開多個: .open("url","_blank")

3.在新窗口打開，只能打開一個:

.open("url","自定義窗口名")

3.history: 保存當(dāng)前窗口打開后，成功訪問過的url的歷史記錄棧

在當(dāng)前窗口中，每訪問一個新url，都會將新url壓入history

API: history.go(n)

3種:

前進: history.go(1)

后退: history.go(-1)

刷新: history.go(0)

4.location: 保存當(dāng)前窗口正在打開的url的對象

屬性:

.href 完整url地址

.protocol 協(xié)議

.host 主機名+端口號

.hostname 主機名

.port 端口號

.pathname 相對路徑

.hash #錨點地址

.search ?查詢字符串

方法:

在當(dāng)前窗口打開，可后退:

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

在當(dāng)前窗口打開，禁止后退:

location.replace(url)

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

普通刷新:

優(yōu)先從瀏覽器本地緩沖獲取資源:

F5

history.go(0)

location.reload(/false/)

強制刷新:

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

location.reload(true)

5.定時器: 2種:

周期性定時器:

什么是: 讓程序每隔指定的時間間隔，反復(fù)執(zhí)行一項任務(wù)

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

如何: 3件事:

1.任務(wù)函數(shù): 讓定時器反復(fù)執(zhí)行的任務(wù)

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

讓程序，每隔interval 毫秒自動執(zhí)行一次task任務(wù)

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

timer: 定時器的序號, 在內(nèi)存中唯一標(biāo)識定時器的整數(shù)

專門用于停止定時器

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

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

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

停止定時器: 2種情況:

用戶手動停止:

定時器可自動停止:

在任務(wù)函數(shù)中，設(shè)定臨界值，如果沒有達到臨界值，則繼續(xù)執(zhí)行任務(wù)，否則，如果達到臨界值，就自動調(diào)用clearInterval

2.一次性定時器:

什么是: 讓程序先等待一段時間，再執(zhí)行一次任務(wù)。執(zhí)行后，自動停止。

何時: 只要讓程序延遲執(zhí)行一件事時

如何: 3件事:

1.task

2.啟動定時器: timer=setTimeout(task,wait)

讓程序等待wait毫秒后，自動執(zhí)行一次task，執(zhí)行后自動停止

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

6.定時器原理:

定時器中的任務(wù)函數(shù)，必須等待主程序所有語句執(zhí)行后，才能執(zhí)行。

7.navigator:

1.什么是: 保存瀏覽器配置信息的對象

包括:

.cookieEnabled: 判斷當(dāng)前瀏覽器是否啟用cookie

2.什么是cookie: 在客戶端持久存儲用戶私密數(shù)據(jù)的小文件

為什么: 內(nèi)存中所有數(shù)據(jù)都是臨時的! 程序關(guān)閉，內(nèi)存中一切變量都釋放!

何時: 只要希望在客戶端持久保存數(shù)據(jù)，都用cookie

.plugins: 包含瀏覽器所有插件信息的集合

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

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

.userAgent: 保存瀏覽器名稱和版本號的字符串

何時: 只要判斷瀏覽器名稱和版本號

8.event:

什么是事件: 人為觸發(fā)的，或瀏覽器自動觸發(fā)的頁面內(nèi)容狀態(tài)的改變。

什么是事件處理函數(shù): 當(dāng)事件發(fā)生時，自動執(zhí)行的函數(shù)。

如何綁定: 3種:

在HTML中綁定:

綁定:

當(dāng)事件發(fā)生時: 自動執(zhí)行js語句

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

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

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

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

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

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

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

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

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

觸發(fā)事件時: 瀏覽器會遍歷監(jiān)聽隊列中的每個監(jiān)聽對象，找到觸發(fā)事件元素上對應(yīng)事件的監(jiān)聽對象，調(diào)用其處理函數(shù)

移除事件監(jiān)聽:

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

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

強調(diào): 如果一個處理函數(shù)，有可能被移除，則不能使用匿名函數(shù)綁定。應(yīng)使用有名的函數(shù)綁定

9.DOM事件模型:

什么是: 從事件觸發(fā)到處理函數(shù)執(zhí)行，所經(jīng)過的過程

3個階段:

捕獲capture: 由外向內(nèi)，記錄各級父元素上綁定的事件處理函數(shù)。——僅記錄，不觸發(fā)!

目標(biāo)觸發(fā): 優(yōu)先觸發(fā)實際點擊的元素上綁定的處理函數(shù)

冒泡執(zhí)行: 由內(nèi)向外，按捕獲階段記錄的處理函數(shù)的倒序，依次執(zhí)行父元素上的處理函數(shù)。

10.事件對象:

什么是: 當(dāng)事件發(fā)生時，自動創(chuàng)建的，封裝事件信息的對象

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

如何獲取: 事件對象默認(rèn)總是以處理函數(shù)第一個參數(shù)，自動傳入

如何使用:

取消冒泡: e.stopPropagation()

利用冒泡:

優(yōu)化: 盡量減少事件監(jiān)聽的個數(shù)

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

事件監(jiān)聽多，瀏覽器查找就慢

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

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

2個難題:

1. 獲得目標(biāo)元素:

目標(biāo)元素: 最初實際觸發(fā)事件的當(dāng)前元素

如何獲得:

錯誤: this->父元素

正確: e.target

2. 篩選目標(biāo)元素:

比如: 通過nodeName, class, 內(nèi)容。。。

阻止默認(rèn)行為:

何時: 只要事件的默認(rèn)行為不是想要的

如何: e.preventDefault();

何時:

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

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

自定義表單提交:

input button + onclick + form.submit

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

HTML5中拖拽API: 首先要阻止瀏覽器默認(rèn)的拖拽行為

11.鼠標(biāo)坐標(biāo): 3組:

1. 相對于屏幕左上角: e.screenX, e.screenY

2. 相對于文檔顯示區(qū)左上角: e.clientX, e.clientY

3. 相對于當(dāng)前元素左上角: e.offsetX, e.offsetY

12.頁面滾動:

事件: window.onscroll

獲得頁面滾動過的高度: body頂部超出文檔顯示區(qū)頂部的距離

scrollTop=document.documentElement.scrollTop

||document.body.scrollTop;

滾動API:

window.scrollTo(left, top)

window.scrollBy(left的增量,top的增量)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。