" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2021年12月03日 15:13:45   作者:bear*6  
這篇文章主要為大家介紹了JavaScript BOM構(gòu)成和常用事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

一、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 語法的標(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 訪問瀏覽器窗口的一個(gè)接口。又是一個(gè)全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。

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

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

如下所示:

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īng)該怎么辦呢?這個(gè)時(shí)候就可以通過我們的窗口加載事件來完成。

window.onload 就是窗口 (頁面)加載事件,當(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àn)?onload是等頁面內(nèi)容全部加載完畢,再去執(zhí)行處理函數(shù)。

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

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

如果此時(shí)我們還有一個(gè)點(diǎn)擊事件,想要將它的操作放到元素前面呢?

來操作試試:

 <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è)事件覆蓋,這是,我們可以另一種方式來操作,如下:

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以上才支持,如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時(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è)例子:

頁面中有一個(gè)盒子,當(dāng)我們的頁面寬度小于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é)果為:

在這里插入圖片描述

同樣的我們也可以通過window.addEventListener("resize",function(){})來進(jìn)行上述操作,這里不在贅述。

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論