一、BOM概述

1.BOM的概念

BOM（Browser Object Model）即瀏覽器對象模型，它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是window

2.BOM的構成

BOM比DOM更大，它包含DOM

window對象是瀏覽器的頂級對象，它具有雙重角色

1.它是JS訪問瀏覽器窗口的一個接口

2.它是一個全局對象，定義在全局作用域中的變量，函數都會編程window對象的屬性和方法，在調用的時候可以省略window，像alert（）、prompt（）等

注意：window下的一個特殊屬性window.name本身有含義，盡量避免定義name變量

二、window對象的常見事件

1.窗口加載事件?

（1）針對window

window.onload = function(){}

或者

window.addEventListener("load",function(){})

window.onload是窗口（頁面）加載事件，當文檔內容完全加載完成會觸發該事件（包括圖形、腳本文件、CSS文件等），就調用的處理函數

注意：

1.使用window.onload可以將script寫在頁面任何一個位置，不再像之前一樣智能寫在要加JS屬性的HTML標簽語句下了

2.window.onload傳統注冊事件方式只能寫一次，如果有多個，回憶最后一個window.onload為準

3.使用addEventListener沒有限制?

傳統注冊事件方式：?

window.onload = function () {var btn = document.querySelector('button');btn.addEventListener('click', function () {alert('點擊');})
}

事件監聽注冊事件方式：

window.addEventListener('load', function () {var btn = document.querySelector('button');btn.addEventListener('click', function () {alert('點擊');})
})

（2）針對document

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

DOMContentLoaded事件觸發時，晉檔dom加載完成，不包括樣式表，圖片，flash等

IE9以上才支持

如果頁面的圖片很多，從用戶訪問到onload觸發肯需要較長時間，交互效果就不能實現，必然影響用戶的體驗，此時用DOMContentLoadd事件比較合適

document.addEventListener('DOMContentLoaded', function () {alert(33);
})

2.調整窗口大小事件

window.onresize = finction(){}

或者

window.addEventListener("resize",function(){})

window.onresize是調整窗口大小加載事件，當觸發時就調用的處理函數

注意：

1.只有窗口大小發生像素變化，就會觸發這個事件

2.我們經常用這個事件完成響應式布局。window.innerWidth 當前屏幕的寬度

3.定時器

（1）setTimeout()

window.setTimeout(調用函數,[延遲的毫秒數]);

?setTimeout（）方法用于設置一個定時器，該定時器在定時器到期后執行調用函數

語法規范：

1.window在調用時可以省略

2.這個延時時間單位是毫秒，但是可以省略，默認是0

3.這個調用函數可以自己寫函數，還可以寫函數名

????????例如

function callkbak() {console.log('爆炸了');
}
setTimeout(callkbak, 3000);

4.頁面中可能有很多計時器，我們經常給定時器加標識符（名字）

var time1 = setTimeout(callkbak, 3000);
var time2 = setTimeout(callkbak, 5000);

??setTimeout（）這個函數調用我們也稱為回調函數callback

普通函數是按照代碼順序直接調用?

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

var ad = document.querySelector('img');
setTimeout(function () {ad.style.display = 'none';
}, 5000);

（2）clearTimeout（）

clearTimeout（）方法取消了先前通過調用setTimeout（）建立的定時器

注意：

1.window可以省略

2.里面的參數就是定時器的標識符

????????例如：

var btn = document.querySelector('button');
timer = setTimeout(function () {console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function () {clearTimeout(timer);
})

（3）setInterval()

window.setTimeout(調用函數,[延遲的毫秒數]);

setInterval()這個調用函數也稱為回調函數

注意：

1.window可以省略

2.可以直接寫函數，或者寫函數名或者采取字符串‘函數名（）’三種形式

? ? ? ? 例如：

setInterval(function () {console.log(1);
}, 1000);

?setInterval()與setTimeout（）的區別：

1. ?setInterval（）是間隔這個時間后執行，只執行一次
2. setTimeout（）是每隔這個時間執行一次，重復執行

案例：倒計時

css：

span {display: inline-block;height: 20px;width: 20px;text-align: center;line-height: 16px;font-size: 16px;color: #fff;background-color: #000;margin: 5px;
}

HTML：

<div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span>
</div>

JavaScript：

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2025-7-22 18:00:00');
count();
setInterval(count, 1000);
function count() {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;
}

（4）clearInterval（）

window.clearInterval(intervalID);

clearInterval（）方法取消了先前通過調用setInterval（）建立的計時器

注意：

1.window可以省略

2.里面的參數就是定時器的標識符

? ? ? ? 例如：對于一個開始按鈕和結束按鈕看，要使點擊開始后開始計數，點擊結束后結束計數

var start = document.querySelector('.start');
var stop = document.querySelector('.stop');
start.addEventListener('click', function () {timer = setInterval(function () {console.log('hi');}, 1000);
})
stop.addEventListener('click', function () {console.log('bye');clearInterval(timer)
})

?案例：發送短信

點擊按鈕后，該按鈕60秒內不能再點擊

對于一個發送按鈕

<button>發送</button>

給它設置JS

var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click', function () {btn.disabled = true;var timer = setInterval(function () {if (time == 0) {clearInterval(timer);btn.disabled = false;btn.innerHTML = '發送';time = 60;}else {btn.innerHTML = '還剩下' + time + '秒';time--;}}, 1000);
})

（5）this

this的指向在函數定義的時候無法確定，只有再函數執行的時候才能確定this到底指向誰，一般情況下this指向的是調用它的對象?

1.全局作用域或者普通函數里this指向全局對象window

? ? ? ? 直接輸出this的指向，為window

console.log(this);//window

? ? ? ? 輸出函數里this的指向，也是window

function fun() {console.log(this);//window
}
fun();

2.方法調用中，誰調用指向誰

var o = {sayHi: function () {console.log(this);//o}
}
o.sayHi();

var btn = document.querySelector('button');
btn.addEventListener('click', function () {console.log(this);//btn
});

3.構造函數中this指向構造函數

function fn() {console.log(this);//fun
}
var fun = new fn();

?