" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 訪(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é)

    本篇文章主要介紹了javascript讀取文本節(jié)點(diǎn)的方法,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧
    2016-12-12
  • 微信小程序中子頁(yè)面向父頁(yè)面?zhèn)髦祵?shí)例詳解

    微信小程序中子頁(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)的方法示例

    這篇文章主要介紹了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í)例

    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ù)解析

    你不知道的forEach函數(shù)解析

    這篇文章主要介紹了你不知道的forEach函數(shù)的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-05-05
  • 基于Bootstrap里面的Button dropdown打造自定義select

    基于Bootstrap里面的Button dropdown打造自定義select

    這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-05-05
  • JS 箭頭函數(shù)的this指向詳解

    JS 箭頭函數(shù)的this指向詳解

    這篇文章主要給大家介紹了關(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)木馬輪播圖效果

    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ì)代碼)

    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)

    Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評(píng)論