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-03
JS實(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-09
JS判斷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
這篇文章主要介紹了你不知道的forEach函數(shù)的相關(guān)資料，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
這篇文章主要給大家介紹了關(guān)JS 箭頭函數(shù)的this指向，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
js中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-10
Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12