前端知識(shí)點(diǎn)總結(jié)——BOM

1.BOM: Browser Object Model

什么是: 專(zhuān)門(mén)操作瀏覽器窗口的API

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

包括:

window

history

location

navigator

dom

event

screen

2.window:

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

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

三種:

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

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

3.在新窗口打開(kāi)，只能打開(kāi)一個(gè):

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

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

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

API: history.go(n)

3種:

前進(jìn): history.go(1)

后退: history.go(-1)

刷新: history.go(0)

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

屬性:

.href 完整url地址

.protocol 協(xié)議

.host 主機(jī)名+端口號(hào)

.hostname 主機(jī)名

.port 端口號(hào)

.pathname 相對(duì)路徑

.hash #錨點(diǎn)地址

.search ?查詢字符串

方法:

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

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

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

location.replace(url)

重新加載頁(yè)面: 刷新: 2種:

普通刷新:

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

F5

history.go(0)

location.reload(/false/)

強(qiáng)制刷新:

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

location.reload(true)

5.定時(shí)器: 2種:

周期性定時(shí)器:

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

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

如何: 3件事:

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

2.啟動(dòng)定時(shí)器: timer=setInterval(task, interval)

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

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

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

專(zhuān)門(mén)用于停止定時(shí)器

如何獲得: 只能在啟動(dòng)定時(shí)器時(shí)獲得。

何時(shí): 只要一個(gè)定時(shí)器可能被停止，就要在啟動(dòng)時(shí)，先保存定時(shí)器序號(hào)

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

停止定時(shí)器: 2種情況:

用戶手動(dòng)停止:

定時(shí)器可自動(dòng)停止:

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

2.一次性定時(shí)器:

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

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

如何: 3件事:

1.task

2.啟動(dòng)定時(shí)器: timer=setTimeout(task,wait)

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

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

6.定時(shí)器原理:

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

7.navigator:

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

包括:

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

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

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

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

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

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

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

.userAgent: 保存瀏覽器名稱(chēng)和版本號(hào)的字符串

何時(shí): 只要判斷瀏覽器名稱(chēng)和版本號(hào)

8.event:

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

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

如何綁定: 3種:

在HTML中綁定:

綁定:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9.DOM事件模型:

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

3個(gè)階段:

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

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

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

10.事件對(duì)象:

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

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

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

如何使用:

取消冒泡: e.stopPropagation()

利用冒泡:

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

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

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

何時(shí): 如果對(duì)多個(gè)子元素綁定相同事件時(shí)，都要利用冒泡

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

2個(gè)難題:

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

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

如何獲得:

錯(cuò)誤: this->父元素

正確: e.target

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

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

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

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

如何: e.preventDefault();

何時(shí):

用a當(dāng)按鈕時(shí)，a會(huì)自動(dòng)向地址欄中添加#錨點(diǎn)地址。

提交表單時(shí)，如果驗(yàn)證沒(méi)通過(guò)，可阻止提交

自定義表單提交:

input button + onclick + form.submit

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

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

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

1. 相對(duì)于屏幕左上角: e.screenX, e.screenY

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

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

12.頁(yè)面滾動(dòng):

事件: window.onscroll

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

scrollTop=document.documentElement.scrollTop

||document.body.scrollTop;

滾動(dòng)API:

window.scrollTo(left, top)

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

總結(jié)

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

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