本文介绍了BOM（BrowserObjectModel）的核心概念，包括它与DOM的区别，BOM的构成，特别是window对象的事件如load和resize，以及定时器setTimeout和setInterval的使用。此外，还提到了this的指向问题和JS执行队列的同步异步概念。
目录
window.addEventListener("resize",function(){})
BOM概述
- 浏览器对象模型，给浏览器窗口做交互效果，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心是window。
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
- BOM缺乏规范，javaScript语法标准化阻止是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
DOM与BOM的区别：
BOM的构成：
- BOM比DOM更大，它包含DOM。
- window对象是浏览器的顶级对象，它具有双重角色。
- 她是JS访问浏览器窗口的一个接口。
- 她是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
- 在调用的时候可以省略window，前面学习的对话框多属于window随心方法，如alert(),prompt()等。
注意：window下的一个特殊属性是window.name，一般不使用
window对象的常见事件
窗口加载事件
load
window.onload=function(){}
或者
window.addEventListner("load",function(){}); window.addEventListener('load',function(){
alert(22);
})window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
注意：
- 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
- window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
- 如果使用addEventListener则没有限制。
DOMContentLoad
document.addEventListener('DOMContentLoad',function(){
alert(33);
})DOMContentLoad加载完DOM元素（不包含图片 flash css等）就可以执行了；
Load是把页面所有元素加载完之后（包括图片 flash css等）才执行。
调整窗口大小
window.οnresize=function(){}
是调整窗口大小加载事件，当触发时就调用的处理函数。
window.addEventListener("resize",function(){})
注意：
- 只要窗口大小变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。
定时器之setTimeout
setTimeout()
window.setTimeout(调用函数，【延迟的毫秒数】)；
//window在调用的时候可以省略
//2s后调用此函数，延时时间的单位是毫秒，但是可以省略，如果省略默认为0
//调用函数可以直接写函数 还可以写函数名
setTimeout(function(){
alert('timeover');
},2000); function callback(){
alert('爆炸了');
}
setTimeout(callback,3000);【页面中不止有一个定时器，如何做到他们不混乱呢？】
给定时器加标识符
function callback(){
alert('爆炸了');
}
// setTimeout(callback,3000);
var time1=setTimeout(callback,3000);
var timer2=setTimeout(callback,5000);window.setTimeout(调用函数，【延迟的毫秒数】）；
setTimeout这个调用函数我们也称为回调函数callback。
回调：等时间结束后再去调用此函数，即回头调用的意思。
【案例】5s后自动关闭的广告
<img src="https://gd-hbimg.huaban.com/1c64b8c24e113b2ff48ce3846683e5abfdcb91884d817-LkI5Dy_fw658" alt="" class="ad">
<script>
var ad =document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none';
},3000)
</script>停止setTimeout（）定时器
window.clearTimeout（）方法取消了先前通过调用setTimeout()建立的定时器。
window可以省略。
<button>点击停止计时器</button>
<script>
var btn=document.querySelector('button');
var timer=setTimeout(function(){
alert('boom');
// console.log('stop');
},3000);
btn.addEventListener('click',function(){
clearTimeout(timer);
})
</script>setlnterval()
window.setInterval（回调函数，【间隔的毫秒数】）；
setlnterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
<script>
setInterval(function(){
console.log('keep output');
},1000);
</script>1.setTimeout 延时时间到了，就去调用这个函数，只调用一次，就结束了这个定时器
2.setInterval 每隔一段时间调用一次回调函数，多次调用，永不停歇
【案例】倒计时效果
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
//1.获取元素
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
var inputTime=+new Date('2023-1-3 18:00:00');//返回的是用户输入时间总的毫秒数
countDown();//我们先调用一次这个函数，防止第一次刷新页面空白
//2.开启定时器
setInterval(countDown,1000);
function countDown(){
var nowTime=+new Date();//返回的是当前时间总的毫秒数
var times=(inputTime-nowTime)/1000;//times是剩余时间总的秒数
// var d=parseInt(times/60/60/24);//天
// d=d<10?'0'+d:d;
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;
// return d+'天'+h+'时'+m+'分'+s+'秒';
}
</script>【案例】清除计时器效果
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin=document.querySelector('.begin');
var stop=document.querySelector('.stop');
var timer=null;//全局变量
begin.addEventListener('click',function(){
timer=setInterval(function(){
console.log('hello');
},1000);
})
stop.addEventListener('click',function(){
clearInterval(timer);
})
</script>【案例】发送验证码
手机号码：<input type="number"><button>发送</button>
<script>
var btn=document.querySelector('button');
var time=3;//定义剩下的秒数
btn.addEventListener('click',function(){
btn.disabled=true;
btn.innerHTML='还剩下3秒';
var timer=setInterval(function(){
if(time==0){
clearInterval(timer);
//复原按钮
btn.disabled=false;
btn.innerHTML='发送';
//这个3需要重新开始
time=3
}else{
btn.innerHTML='还剩下'+time+'秒';
time--;
}
},1000);
})
</script>this的指向问题
一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
<button>点击</button>
<script>
//this指向问题 一般情况下this的最终指向的是哪个调用它的对象
//1.全局作用域或普普通通函数中this指向全局对象window
//1
console.log(this);
//2
function fn(){
console.log(this);
}
window.fn();
//3
setTimeout(function(){
console.log(this);
},1000)
</script>2.方法调用中谁调用this指向谁
<button>点击</button>
<script>
//this指向问题 一般情况下this的最终指向的是哪个调用它的对象
//2.方法调用中谁调用this指向谁
var o={
sayHi:function(){
console.log(this);
}
}
o.sayHi();//sayHi
var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this);//button
}
btn.addEventListener('click',functiion(){
console.log(this);//button
})
</script>
3.构造函数中this指向构造函数的实例
<button>点击</button>
<script>
//3.构造函数中this指向构造哈纳树的实例
function Fun(){
console.log(this);//fun
}
var fun=new Fun();
</script>JS的执行队列
js语言的一大特点是单线程，即同一时间只能做一件事。
如何解决单线程的效率浪费？——引入同步异步的概念
同步与异步
同步：钱一个任务结束后再执行后一个任务
异步：在做一件事情的同时处理别的事情
区别：这天流水线上各个流程的执行顺序不同。
JS执行机制
location对象
【案例】5秒后自动跳转页面
<button>点击</button>
<div></div>
<script>
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.addEventListener('click',function(){
location.href='https://space.bilibili.com/407667279/video';
})
var timer=5;
//为了防止刷新空白，所以封装一个函数
countDown();
setInterval(countDown,1000);
function countDown(){
if(timer==0){
location.href='https://space.bilibili.com/407667279/video'
}else{
div.innerHTML='您将在'+timer+'秒钟后跳转到首页';
timer--;}}
</script>location对象
【案例】获取URL参数
location对象的方法
navigator对象
history对象
1724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
