JavaScript之BOM構(gòu)成和常用事件詳解

更新時間：2021年12月03日 15:13:45 作者：bear*6

這篇文章主要為大家介紹了JavaScript BOM構(gòu)成和常用事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、BOM

1、什么是BOM？

BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是 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)的一部分。

2、BOM的構(gòu)成

如下圖所示：

在這里插入圖片描述

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

它既是 JS 訪問瀏覽器窗口的一個接口。又是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法。

在調(diào)用的時候可以省略 window，alert()、prompt()等都屬于 window 對象方法。

我們可以調(diào)用window對象來看看其有哪些屬性和方法。

如下所示：

console.log(window);

截取部分如下所示：

在這里插入圖片描述

可見，定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法。

二、window對象的常用事件

1、窗口加載事件

我們知道在javascript的執(zhí)行機制中，代碼的執(zhí)行是按照從上往下的順序執(zhí)行的，所以如果我們要給一個按鈕添加點擊事件，只能先設(shè)置按鈕，然后獲得按鈕在進行操作，如下：

<body>
    <button>點擊</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('您剛點擊了一下！')
        }
    </script>
</body>

點擊效果為：

在這里插入圖片描述

如果我們想要把綁定的點擊事件放置到頁面前面，很明顯是無法操作的。那應(yīng)該怎么辦呢？這個時候就可以通過我們的窗口加載事件來完成。

window.onload 就是窗口 (頁面）加載事件,當(dāng)文檔內(nèi)容完全加載完成會觸發(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('您剛點擊了一下！')
        }
        }
    </script>
    <button>點擊</button>
</body>

這個時候也可以實現(xiàn)點擊效果。

在這里插入圖片描述

需要注意的是：

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

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

3.如果使用 addEventListener 則沒有限制。

如果此時我們還有一個點擊事件，想要將它的操作放到元素前面呢？

來操作試試：

 <script>
        window.onload = function(){
            var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('您又點擊了一下！')
        }
    }
        window.onload = function(){
           alert('你好')
        }
    </script>
    <button>點擊</button>
</body>

打印結(jié)果如何呢？

在這里插入圖片描述

可以發(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>

運行結(jié)果為：

在這里插入圖片描述

DOMContentLoaded事件觸發(fā)時，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash等等。這種方法Ie9以上才支持，如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時間, 交互效果就不能實現(xiàn)，必然影響用戶的體驗，此時用 DOMContentLoaded事件比較合適。

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

在很多網(wǎng)站上，我們會發(fā)現(xiàn)，當(dāng)我們改變窗口大小時，里面的內(nèi)容也會隨之改變，這又是怎樣做到的呢？這里就要用到我們的調(diào)整窗口大小事件。

其格式為：

//（1）
window.onresize = function(){}
//(2)
window.addEventListener("resize",function(){});

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

舉個例子：

頁面中有一個盒子，當(dāng)我們的頁面寬度小于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>

打印結(jié)果為：

在這里插入圖片描述