腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

一、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 訪問(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);

截取部分如下所示：

在這里插入圖片描述

可見，定義在全局作用域中的變量、函數(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 代碼寫到頁(yè)面元素的上方，因?yàn)?onload是等頁(yè)面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)。

2.window.onload 傳統(tǒng)注冊(cè)事件方式只能寫一次，如果有多個(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è)面的圖片很多的話, 從用戶訪問(wèn)到onload觸發(fā)可能需要較長(zhǎng)的時(shí)間, 交互效果就不能實(shí)現(xiàn)，必然影響用戶的體驗(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é)果為：

在這里插入圖片描述