JavaScript之BOM構成和常用事件詳解
一、BOM
1、什么是BOM？
BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是 window。
BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。
BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA，DOM 的標準化組織是 W3C，BOM 最初是Netscape 瀏覽器標準的一部分。
2、BOM的構成
如下圖所示：
window 對象是瀏覽器的頂級對象，它具有雙重角色。
它既是 JS 訪問瀏覽器窗口的一個接口。又是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法。
在調用的時候可以省略 window，alert()、prompt()等都屬于 window 對象方法。
我們可以調用window對象來看看其有哪些屬性和方法。
如下所示：
console.log(window);
截取部分如下所示：
可見，定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法。
二、window對象的常用事件
1、窗口加載事件
我們知道在javascript的執(zhí)行機制中，代碼的執(zhí)行是按照從上往下的順序執(zhí)行的，所以如果我們要給一個按鈕添加點擊事件，只能先設置按鈕，然后獲得按鈕在進行操作，如下：
<body>
<button>點擊</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function(){
alert('您剛點擊了一下！')
}
</script>
</body>
點擊效果為：
如果我們想要把綁定的點擊事件放置到頁面前面，很明顯是無法操作的。那應該怎么辦呢？這個時候就可以通過我們的窗口加載事件來完成。
window.onload 就是窗口 (頁面）加載事件,當文檔內容完全加載完成會觸發(fā)該事件(包括圖像、腳本文件、CSS 文件等), 就調用的處理函數(shù)。
window.onload = function(){}
//或者
window.addEventListener("load",function(){});
如上例：
<body>
<script>
window.onload = function(){
var btn = document.querySelector('button');
btn.onclick = function(){
alert('您剛點擊了一下！')
}
}
</script>
<button>點擊</button>
</body>
這個時候也可以實現(xiàn)點擊效果。
需要注意的是：
1.有了 window.onload 就可以把 JS 代碼寫到頁面元素的上方，因為 onload是等頁面內容全部加載完畢，再去執(zhí)行處理函數(shù)。
2.window.onload 傳統(tǒng)注冊事件方式 只能寫一次，如果有多個，會以最后一個 window.onload 為準。
3.如果使用 addEventListener 則沒有限制。
如果此時我們還有一個點擊事件，想要將它的操作放到元素前面呢？
來操作試試：
<script>
window.onload = function(){
var btn = document.querySelector('button');
btn.onclick = function(){
alert('您又點擊了一下！')
}
}
window.onload = function(){
alert('你好')
}
</script>
<button>點擊</button>
</body>
打印結果如何呢？
可以發(fā)現(xiàn)，第一個事件會被第二個事件覆蓋，這是，我們可以另一種方式來操作，如下：
document.addEventListener('DOMContentLoaded',function(){})
代碼為：
<script>
document.addEventListener('DOMContentLoaded',function(){
var btn = document.querySelector('button');
btn.onclick = function(){
alert('您又點擊了一下！')
}
alert('你好呀')
})
</script>
<button>點擊</button>
</body>
運行結果為：
DOMContentLoaded事件觸發(fā)時，僅當DOM加載完成，不包括樣式表，圖片，flash等等。這種方法Ie9以上才支持，如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時間, 交互效果就不能實現(xiàn)，必然影響用戶的體驗，此時用 DOMContentLoaded事件比較合適。
2、調整窗口大小事件
在很多網(wǎng)站上，我們會發(fā)現(xiàn)，當我們改變窗口大小時，里面的內容也會隨之改變，這又是怎樣做到的呢？這里就要用到我們的調整窗口大小事件。
其格式為：
//（1）
window.onresize = function(){}
//(2)
window.addEventListener("resize",function(){});
window.onresize是調整窗口大小加載事件, 當觸發(fā)時就調用的處理函數(shù)。
舉個例子：
頁面中有一個盒子，當我們的頁面寬度小于800px時，讓這個盒子的顏色變成紫色。
<!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>
打印結果為：
同樣的我們也可以通過window.addEventListener("resize",function(){})來進行上述操作，這里不在贅述。
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
本篇文章主要介紹了javascript讀取文本節(jié)點的方法，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
基于Bootstrap里面的Button dropdown打造自定義select
js中base64、url和blob之間相互轉換的3種方式(詳細代碼)
Bootstrap基本插件學習筆記之Popover提示框(19)