JavaScript之BOM構(gòu)成和常用事件詳解
一、BOM
1、什么是BOM?
BOM(Browser Object Model)即瀏覽器對(duì)象模型,它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象,其核心對(duì)象是 window。
BOM 由一系列相關(guān)的對(duì)象構(gòu)成,并且每個(gè)對(duì)象都提供了很多方法與屬性。
BOM 缺乏標(biāo)準(zhǔn),JavaScript 語(yǔ)法的標(biāo)準(zhǔn)化組織是 ECMA,DOM 的標(biāo)準(zhǔn)化組織是 W3C,BOM 最初是Netscape 瀏覽器標(biāo)準(zhǔn)的一部分。
2、BOM的構(gòu)成
如下圖所示:
window 對(duì)象是瀏覽器的頂級(jí)對(duì)象,它具有雙重角色。
它既是 JS 訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口。又是一個(gè)全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。
在調(diào)用的時(shí)候可以省略 window,alert()、prompt()等都屬于 window 對(duì)象方法。
我們可以調(diào)用window對(duì)象來(lái)看看其有哪些屬性和方法。
如下所示:
console.log(window);
截取部分如下所示:
可見(jiàn),定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。
二、window對(duì)象的常用事件
1、窗口加載事件
我們知道在javascript的執(zhí)行機(jī)制中,代碼的執(zhí)行是按照從上往下的順序執(zhí)行的,所以如果我們要給一個(gè)按鈕添加點(diǎn)擊事件,只能先設(shè)置按鈕,然后獲得按鈕在進(jìn)行操作,如下:
<body> <button>點(diǎn)擊</button> <script> var btn = document.querySelector('button'); btn.onclick = function(){ alert('您剛點(diǎn)擊了一下!') } </script> </body>
點(diǎn)擊效果為:
如果我們想要把綁定的點(diǎn)擊事件放置到頁(yè)面前面,很明顯是無(wú)法操作的。那應(yīng)該怎么辦呢?這個(gè)時(shí)候就可以通過(guò)我們的窗口加載事件來(lái)完成。
window.onload
就是窗口 (頁(yè)面)加載事件,當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(fā)該事件(包括圖像、腳本文件、CSS 文件等), 就調(diào)用的處理函數(shù)。
window.onload = function(){} //或者 window.addEventListener("load",function(){});
如上例:
<body> <script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您剛點(diǎn)擊了一下!') } } </script> <button>點(diǎn)擊</button> </body>
這個(gè)時(shí)候也可以實(shí)現(xiàn)點(diǎn)擊效果。
需要注意的是:
1.有了 window.onload
就可以把 JS 代碼寫(xiě)到頁(yè)面元素的上方,因?yàn)?onload是等頁(yè)面內(nèi)容全部加載完畢,再去執(zhí)行處理函數(shù)。
2.window.onload
傳統(tǒng)注冊(cè)事件方式 只能寫(xiě)一次,如果有多個(gè),會(huì)以最后一個(gè) window.onload 為準(zhǔn)。
3.如果使用 addEventListener 則沒(méi)有限制。
如果此時(shí)我們還有一個(gè)點(diǎn)擊事件,想要將它的操作放到元素前面呢?
來(lái)操作試試:
<script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又點(diǎn)擊了一下!') } } window.onload = function(){ alert('你好') } </script> <button>點(diǎn)擊</button> </body>
打印結(jié)果如何呢?
可以發(fā)現(xiàn),第一個(gè)事件會(huì)被第二個(gè)事件覆蓋,這是,我們可以另一種方式來(lái)操作,如下:
document.addEventListener('DOMContentLoaded',function(){})
代碼為:
<script> document.addEventListener('DOMContentLoaded',function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又點(diǎn)擊了一下!') } alert('你好呀') }) </script> <button>點(diǎn)擊</button> </body>
運(yùn)行結(jié)果為:
DOMContentLoaded
事件觸發(fā)時(shí),僅當(dāng)DOM加載完成,不包括樣式表,圖片,flash等等。這種方法Ie9以上才支持,如果頁(yè)面的圖片很多的話(huà), 從用戶(hù)訪(fǎng)問(wèn)到onload觸發(fā)可能需要較長(zhǎng)的時(shí)間, 交互效果就不能實(shí)現(xiàn),必然影響用戶(hù)的體驗(yàn),此時(shí)用 DOMContentLoaded事件比較合適。
2、調(diào)整窗口大小事件
在很多網(wǎng)站上,我們會(huì)發(fā)現(xiàn),當(dāng)我們改變窗口大小時(shí),里面的內(nèi)容也會(huì)隨之改變,這又是怎樣做到的呢?這里就要用到我們的調(diào)整窗口大小事件。
其格式為:
//(1) window.onresize = function(){} //(2) window.addEventListener("resize",function(){});
window.onresize是調(diào)整窗口大小加載事件, 當(dāng)觸發(fā)時(shí)就調(diào)用的處理函數(shù)。
舉個(gè)例子:
頁(yè)面中有一個(gè)盒子,當(dāng)我們的頁(yè)面寬度小于800px時(shí),讓這個(gè)盒子的顏色變成紫色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> <script> div = document.querySelector('div') window.onresize = function(){ console.log(window.innerWidth); if(window.innerWidth <= 800){ div.style.backgroundColor = 'green'; } } </script> </body> </html>
打印結(jié)果為:
同樣的我們也可以通過(guò)window.addEventListener("resize",function(){})
來(lái)進(jìn)行上述操作,這里不在贅述。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript讀取文本節(jié)點(diǎn)方法小結(jié)
本篇文章主要介紹了javascript讀取文本節(jié)點(diǎn)的方法,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解
這篇文章主要介紹了微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動(dòng)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻加速與勻減速運(yùn)動(dòng)的方法,涉及javascript結(jié)合時(shí)間函數(shù)與數(shù)學(xué)運(yùn)算動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09JS判斷form內(nèi)所有表單是否為空的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS判斷form內(nèi)所有表單是否為空的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01js中base64、url和blob之間相互轉(zhuǎn)換的3種方式(詳細(xì)代碼)
這篇文章主要給大家介紹了關(guān)于js中base64、url和blob之間相互轉(zhuǎn)換的3種方式,Blob和File是用來(lái)表示二進(jìn)制數(shù)據(jù)的,而B(niǎo)ase64則是一種編碼方式,用來(lái)把二進(jìn)制數(shù)據(jù)編碼成可讀的字符串,需要的朋友可以參考下2023-10-10Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12