本篇內(nèi)容介紹了“javascript BOM核心之window對象怎么應(yīng)用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為瀏陽企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站制作，瀏陽網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

1 BOM 概述

1.1 什么是 BOM

BOM ( Browser Object Model )即瀏 覽 器 對 象 模 型, 它提供了獨(dú)立于內(nèi)容而與瀏 覽 器 窗 口 進(jìn) 行 交 互 的 對 象,其核心對象是window。

BOM由一系列相關(guān)的對象構(gòu)成,并且每個對象都提供了很多方法與屬性。

BOM缺乏標(biāo)準(zhǔn), JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA , DOM的標(biāo)準(zhǔn)化組織是W3C , BOM最初是Netscape瀏覽器標(biāo)準(zhǔn)的一部分。

頁面 后退，前進(jìn)，刷新，窗口大小，滾動等，都可以使用BOM

D O M

文檔對象模型

DOM就是把文 檔 當(dāng)做一個對 象來看待

DOM的頂級對象是d o c u m e n t

DOM主要學(xué)習(xí)的是操作頁面元素

DOM是W3C標(biāo)準(zhǔn)規(guī)范

B O M

瀏覽器對象模型

把color瀏 覽 器當(dāng)做一個對 象來看待

BOM的頂級對象是w i n d o w

BOM學(xué)習(xí)的是瀏覽器窗口交互的- -些對象

BOM是瀏覽器廠商在各自瀏覽器上定義的,兼容性較差

對比BOM 和 DOM 在瀏覽器中的區(qū)域

1.2 BOM 的構(gòu)成

BOM 比 DOM更大 , 它包含DOM。

window對象是瀏覽器的頂級對象,它具有雙重角色。

1.它是 JS 訪問瀏覽器窗口的一一個接口。

2.它是一個全局對象。 定義在全局作用域中的變量、函數(shù)都會變成window對象的屬性和方法。

注意: window下的一個特殊屬性window.name

eg 05-BOM頂級對象window.html

2 window對象的常見事件

2.1 窗口加載事件

window.onload = function() {}或者
window.addEventListener ("load",function(){}) ;

window.onload是窗口頁面)加載事件 , 當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件(包括圖像、腳本文件、CSS文件等) , 就調(diào)用的處理函數(shù)。

注意:

• 有了window.onload就可以把JS代碼寫到頁面元素的上方,因?yàn)閛nload是等頁面內(nèi)容全部加載完畢, 再去執(zhí)行處理函數(shù)。

• window.onload傳統(tǒng)注冊事件方式只能寫一次 , 如果有多個,會以最后一個window.onload 為準(zhǔn)。

• 如果使用addEventListener則沒有限制

document.addEventListener('DOMContentLoaded',function() {})

DOMContentLoaded事件觸發(fā)時 , 僅當(dāng)DOM加載完成 , 不包括樣式表,圖片, flash等等。

le9以上才支持

如果頁面的圖片很多的話 , 從用戶訪問到onload觸發(fā)可能需要較長的時間，交互效果就不能實(shí)現(xiàn),必然影響用戶的體驗(yàn) , 此時用DOMContentLoaded事件比較合適。

eg 06-window 常用事件 onload.html

  
  
  
  
  
  
  點(diǎn)擊

上面代碼部分使用被注釋，整體執(zhí)行效果為：先彈出33，再彈出22，之后點(diǎn)擊按鈕，彈出點(diǎn)擊我

2.2 調(diào)整窗口大小事件

window.onresize = function() {}window.addEventListener ("resize", function() {});

window . onresize是調(diào)整窗口大小加載事件,當(dāng)觸發(fā)時就調(diào)用的處理函數(shù)。

注意:

• 只要窗口大小發(fā)生像素變化,就會觸發(fā)這個事件。

• 我們經(jīng)常利用這個事件完成響應(yīng)式布局。window.innerWidth 當(dāng)前屏幕的寬度

eg. 07-調(diào)整窗口大小事件.html

效果：頁面大于800像素方框顯示，小于800不顯示

“javascript BOM核心之window對象怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！