簡介 BOM( Browser Object Model )即瀏覽器物件模型，它提供了獨立於內容而與瀏覽器視窗進行互動的物件，其核心物件是 window BOM的構成

視窗載入事件 window.onload = function() {}; window.addEventListener("load", function() {}); 當文件內容完全載入完成會觸發該事件（包括影象、指令碼檔案、CSS、檔案等） window.onload 傳統註冊事件只能寫一次，如果有多個，會以最後一個 window.onload 為準 使用 addEventListener 則沒有限制 document.addEventListener("DOMContentLoaded", function() {}); 當DOM載入完成，不包括影象、指令碼檔案、CSS、檔案 調整視窗大小事件

window.onresize = function() {}; window.addEventListener("resize", function() {}); 只要視窗大小發生畫素變化，就會觸發 window.innerWidth // 當前螢幕的寬度 setTimeout() 定時器 window.setTimeout(呼叫函式, [延遲的毫秒數]); 只調用一次 window 可以省略 呼叫函式可以直接寫函式，或者寫函式名 延遲的毫秒數省略預設是0，如果寫，必須是毫秒 清除定時器 clearTimeout() window.clearTimeout(timeoutID); window 可以省略 timeoutID 是定時器的識別符號 setInterval() 定時器

window.setInterval(呼叫函式, [間隔的毫秒數]); 重複呼叫，每隔一段時間，就去呼叫 window 可以省略 呼叫函式可以直接寫函式，或者寫函式名 延遲的毫秒數省略預設是0，如果寫，必須是毫秒，表示每隔多少毫秒就呼叫這個函式 清除定時器 clearInterval() window.clearInterval(intervalID); window 可以省略 intervalID 是定時器的識別符號 同步和非同步 同步： 前一個任務結束後再執行後一個任務，程式的執行順序與任務的排列順序是一致的、同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了(10分鐘之後)，再去切菜，炒菜 同步任務都在主執行緒上執行，形成一個執行棧 非同步：

你在做一件事情時，因為這件事情會花費很長時間，在做這件事的同時，你還可以去處理其他事情。比如做飯的非同步做法：我們在燒水的同時，利用這10分鐘，去切菜，炒菜 JS的非同步是通過回撥函式實現的 一般而言，非同步任務有以下三種類型 1、普通事件，如 click、resize等 2、資源載入，如 load、error等 3、定時器，包括 setInterval、setTimeout等 非同步任務相關回調函式新增到任務佇列中（訊息佇列） JS執行機制 先執行執行棧中的同步任務，非同步任務放入任務佇列中 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取任務佇列中的非同步任務，進入執行棧，開始執行 location 物件 location 常用方法 location.assign() // 和 href 一樣，可以跳轉頁面（也稱為重定向頁面） location.replace() // 替換當前頁面，因為不記錄歷史，所以不能後退頁面 location.reload() // 重新載入頁面，相當於重新整理按鈕或者 F5 如果引數為 true 強制重新整理 Ctrl+F5 history 物件 與瀏覽器歷史記錄進行互動 history.back() // 返回上一頁 history.forward() // 前進一頁 history.go(引數) // 如果是正值則前進，如果是負值則後退 元素偏移量 offset 以帶有定位的父元素為準，如果沒有父元素或者父元素沒有定位，則以body為準 元素可視區 client 元素滾動 scroll window.pageYOffset // 頁面被捲去的頭部距離 window.pageXOffset // 頁面被捲去的左側距離 視窗滾動 window.scroll(x, y); 注意：裡面的 x 和 y 不跟單位，直接寫數字

---

移動端 touch 觸控事件 touchstart // 手指觸控到一個 DOM 元素時觸發 touchmove // 手指放在一個 DOM 元素上滑動時觸發 touchend // 手指從一個 DOM 元素上移開時觸發 觸控事件物件 touches // 正在觸控式螢幕幕的所有手指的一個列表 targetTouches // 正在觸控當前 DOM 元素上的手指的一個列表 changedTouches // 手指狀態發生了改變的列表，從無到有，從有到無的變化 移動端拖動元素 1. touchstart、touchmove、touched 可以實現拖動元素 2.但是拖動元素需要當前手指的座標值，我們可以使用 targetTouches[0] 裡面的 pageX 和 pageY 3.移動端拖動的原理：手指移動中，計算出手指移動的距離。然後用盒孑原來的位置+手指移動的距離 4.手指移動的距離：手指滑動中的位置減去手指剛開始觸控的位置 拖動元素三步曲 1.觸控元素 touchstart：獲取手指初始座標,同時獲得盒子原來的位置 2.移動手指 touchmove：計算手指的滑動距離,並且移動盒子 3.離開手指 touched 注意：手指移動也會觸發滾動螢幕所以這裡要阻止預設的螢幕滾動 e.preventDefault(); classList 屬性 新增類 element.classList.add('類名'); 例：focus.classList.add('current'); 移除類 element.classList.remove('類名'); 例：focus.classList.remove('current'); 切換類 如果該元素已存在該類名則移除，不存在則新增 element.classList.toggle('類名');

---

window.sessionStorage 1.生命週期為關閉瀏覽器視窗 2.在同一個視窗（頁面）下資料可以共享 3.以鍵值對的形式儲存使用 儲存資料 sessionStorage.setItem(key, value); 獲取資料 sessionStorage.getItem(key); 刪除資料 sessionStorage.removeItem(key); 刪除所有資料 sessionStorage.clear(); window.localStorage 1.生命週期永久生效，除非手動刪除，否則關閉頁面也會存在 2.可以多視窗（頁面）共享（同一瀏覽器可以共享） 3.以鍵值對的形式儲存使用 儲存資料 localStorage.setItem(key, value); 獲取資料 localStorage.getItem(key); 刪除資料 localStorage.removeItem(key); 刪除所有資料 localStorage.clear();

本文來自部落格園，作者：番薯吃地瓜，轉載請註明原文連結：https://www.cnblogs.com/sweet-potatos/p/15309823.html