本篇為 JavaScript 系列筆記第七篇，將陸續更新后續內容，參考：黑馬程式員JavaScript核心教程，前端基礎教程

系列筆記：

JavaScript（一）—— 初識JavaScript / 注釋 / 輸入輸出陳述句 / 變數 / 資料型別

JavaScript（二）—— 運算子 / 流程控制 / 陣列

JavaScript（三）—— 函式 / 作用域 / 預決議 / 物件

JavaScript（四）—— 內置物件 / 簡單資料型別與復雜型別

JavaScript（五）—— Web APIs 簡介 / JavaScript 必須掌握的 DOM 操作

JavaScript（六）—— DOM 事件高級

一、BOM 概述

BOM ( Browser Object Model ) 是指瀏覽器物件模型，瀏覽器物件模型提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，
BOM 由多個物件組成，其中代表瀏覽器視窗的 Window 物件是 BOM 的頂層物件，其他物件都是該物件的子物件，
由于 BOM 沒有相關標準，每個瀏覽器都有其自己對 BOM 的實作方式，BOM 有視窗物件、導航物件等一些實際上已經默認的標準，但對于這些物件和其它一些物件，每個瀏覽器都定義了自己的屬性和方式，

對比一下 DOM 和 BOM

DOM
1. 檔案物件模型
2. DOM 就是把「檔案」當作一個「物件」來看待
3. DOM 的頂級物件是 document
4. DOM 主要學習的是操作頁面元素
5. DOM 是 W3C 標準規范
BOM
1. 瀏覽器物件模型
2. BOM 就是把「瀏覽器」當作一個「物件」來看待
3. BOM 的頂級物件是 window
4. BOM 學習的是瀏覽器視窗互動的一些物件
5. BOM 是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

BOM 構成
在這里插入圖片描述
window 物件是瀏覽器的頂級物件，它具有雙重角色

它是 JavaScript 訪問瀏覽器視窗的一個介面
它是一個全域物件，定義在全域作用域中的變數、函式都會變成 window 物件的屬性和方法

在呼叫的時候可以省略 window，前面學習的對話框都屬于 window 物件方法，如 alert()、prompt() 等

注意：window下有一個特殊屬性 window.name，宣告變數時不要用 name

二、window 物件常見事件

視窗加載事件 —— 方式一

1.	window.onload = function () {}						傳統方式
2.	window.addEventListener('load', function () {})		方法監聽注冊方式

window.onload 是視窗（頁面）加載事件，當檔案內容完全加載完成會觸發該事件（包括影像、腳本事件、CSS檔案等）

有了 window.onload 就可以把 JavaScript 代碼寫到頁面元素上方，甚至外部
window.onload 傳統注冊事件方式只能寫一次，如果有多個，會以最后一個 window.onload 為準；但如果使用 addEventListener 則沒有限制

視窗加載事件 —— 方式二

	document.addEventListener('DOMContentLoaded', function () {})

DOMContentLoaded 事件觸發時，僅當 DOM 加載完成，不包括樣式表、圖片、flash 等

IE9 以上才支持
當頁面圖片很多時，為避免互動事件過長影響用戶體驗，可使用此方法

調整視窗大小事件

1.	window.onresize = function () {}
2.	window.addEventListener('resize', function () {})

window.onresize 是調整大小加載事件，當觸發時就呼叫處理函式

注意：

只要視窗大小發生像素變化，就觸發這個事件
常利用這個事件完成回應式布局， window.innerWidth 當前螢屏的寬度

三、定時器

定時方法一 —— setTimeout()

	window.setTimeout(呼叫函式, [延遲的毫秒數])

此方法用于設定一個定時器，該定時器再定時到期后執行呼叫函式

window 可省略
也可以直接寫函式名，或者采用字串 `函式名()`（不推薦）
省略延時的毫秒數，默認是 0
因為定時器可能有很多，所以我們經常給定時器賦值一個識別符號

setTimeout() 這個呼叫函式我們也稱回呼函式 callback

案例： 3 秒后自動關閉的廣告

<img src="images/ad.jpg" alt="" class="ad">
<script>
    var ad = document.querySelector('.ad');
    setTimeout(function () {
        ad.style.display = 'none';
    }, 3000);
</script>

停止 setTimeout() 定時器

window.clearTimeout(timeoutID)

此方法取消了先前通過呼叫 setTimeout() 建立的定時器

window 可以省略
里面的引數就是定時器的識別符號

定時方法二 —— setInterval()

window.setInterval(回呼函式, [間隔的毫秒數])

此方法按周期重復呼叫回呼函式，
在這里插入圖片描述

案例：倒計時

<div>
        <span class="hour">-0</span> ：
        <span class="minute">-0</span> ：
        <span class="second">-0</span>
</div>
<script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2021-10-2 20:00:00');
    // 先呼叫，防止重繪頁面時出現空白資訊
    countDown();    
    // 計時器，周期呼叫
    setInterval(countDown, 1000);
    // 倒計時函式
    function countDown() {
        var nowTime = +new Date();
        var times = (inputTime - nowTime) / 1000;   // 倒計時總毫秒數
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }
</script>

停止 setInterval() 定時器

window.clearInterval(intervalID)

此方法取消了先前通過呼叫 setInterval() 建立的定時器

window 可以省略
里面的引數就是定時器的識別符號

在這里插入圖片描述
注意：首先要定義全域變數 timer，其次要將其賦值為 null，否則為 undefined 容易引起問題請添加圖片描述

案例：發送短信

點擊按鈕后，該按鈕 3 秒之內不能再次點擊，防止重復發送請添加圖片描述

手機號碼： <input type="number"> <button>發送</button>
<script>
     var btn = document.querySelector('button');
     var time = 3;
     btn.addEventListener('click', function () {
         this.disabled = true;
         var timer = setInterval(function () {
             if (time <= 0) {
                 clearInterval(timer);
                 btn.innerHTML = '發送';
                 btn.disabled = false;
                 time = 3;
             } else {
                 btn.innerHTML = '剩余' + time + '秒';
                 time--;
             }
         }, 1000)
     })
 </script>

四、JavaScript 執行機制

JS 是單執行緒

JavaScript 語言的一大特點就是單執行緒，同一時間只能做一件事，但是，這樣勢必會引起一個問題：如果 JavaScript 執行的時間過長，就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的效果，

同步和異步

為了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創建多個執行緒，于是 JavaScript 出現了同步和異步，

同步

前一個任務執行結束再執行后一個任務，程式的執行順序與任務的排列順序是一致、同步的
異步

多任務多執行緒，可以同時執行多個任務

同步任務和異步任務

同步任務：同步任務都在主執行緒上執行，形成一個執行堆疊
異步任務：JS 的異步任務是通過回呼函式實作的

一般而言，異步任務有以下三種型別：

普通事件，如 click、resize 等
資源加載，如 load、error 等
定時器，包括 serInterval、setTimeout 等

異步任務相關的回呼函式添加到任務佇列（訊息佇列）中

A Question

在這里插入圖片描述
對此進行分析：

先執行執行堆疊中的同步任務
遇到異步任務（回呼函式）將其放入任務佇列中
一旦執行堆疊中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行堆疊開始被執行

JS 執行機制

在這里插入圖片描述
由于主執行緒不斷地重復獲取任務、執行任務、再獲取新任務、再執行，所以這種機制稱為事件回圈（event loop）

五、location 物件

location 物件存盤了當前檔案位置 URL 相關的資訊，簡單地說就是網頁地址字串，使用 window 物件的 location 屬性可以訪問，

URL

統一資源定位器，它是 WWW 的統一資源定位標志，就是指網路地址

URL的一般語法格式為：[ ] 內為可選

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

protocol（協議）：指定使用的傳輸協議，最常用的是HTTP協議
hostname（主機名）：是指存放資源的服務器的域名系統（DNS) 主機名或 IP 地址
port（埠號）：http 的默認埠為 80
path（路徑）：一般用來表示主機上的一個目錄或檔案地址
parameters（引數）：用于指定特殊引數的可選項
query（查詢）：鍵值對形式，用于給動態網頁傳遞引數
fragment（資訊片斷）：字串，用于指定網路資源中的片段

location 物件屬性

http://www.123.cn:80/news/index.asp?id=123&name=location#top

location 物件定義了 8 個屬性，其中 7 個屬性可以獲取當前 URL 的各部分資訊，另一個屬性 href 包含了完整的 URL 資訊，詳細說明如下表所示
在這里插入圖片描述
重點：location.href 和 location.search

案例：5 秒后自動跳轉頁面

    var div = document.querySelector('div');
    var time = 5;
    countDown();	// 避免空白頁面
    var timer = setInterval(countDown, 1000);
    function countDown() {
        if (time > 0)
            div.innerHTML = '頁面將在' + time-- + '秒后跳轉';
        else
            location.href = 'http://www.mi.com';
    }

案例：獲取 URL 引數資料

實作資料可以在不同頁面中的相互傳遞
請添加圖片描述
在這里插入圖片描述

提交表單采用 HTTP GET 方法；表單資料會附加在 action 屬性的 URL 中，并以 ’ ? ’ 作為分隔符
利用 search 獲取 ’ ? ’ 及后面部分，再利用字串截取和分隔來獲取 andy，有時也會用到 uname，因此獲取去掉 ’ ? ’ 再獲取

location 物件常見方法

在這里插入圖片描述

location.assign() 記錄瀏覽歷史，可以實作后退
location.replace() 不記錄瀏覽歷史，不可以進行后退
location.reload(true) 強制重繪，清除快取

六、navigator 物件

Navigator 介面表示用戶代理的狀態和標識，它允許腳本查詢它和注冊自己進行一些活動，

可實作頁面在不同終端之間的跳轉
常用：NavigatorID.userAgent，回傳當前瀏覽器的用戶代理，即由客戶機發送服務器的 user-agent 頭部的值

下面代碼可以判斷哪個終端打開頁面，并實作頁面跳轉

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|
BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|
Windows Phone)/i))) {
    window.location.href = "";      // 手機
} else {
    window.location.href = "";      // 電腦
}

七、history 物件

history 物件，用于與瀏覽器歷史記錄進行互動，該物件包含用戶（在瀏覽器視窗中）訪問過的 URL
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305473.html

標籤：其他

上一篇：[javascript]二叉樹根節點到葉子節點和為指定值的路徑

下一篇：學習ES6系列：generator的基本認識和使用