本文详细介绍了BOM（浏览器对象模型），包括BOM概述、window对象及其常见事件，如onload和onresize，还涉及定时器（setTimeout和setInterval）、JS执行机制、location对象、navigator对象、history对象以及screen对象的使用，旨在帮助读者深入理解JavaScript与浏览器窗口的交互。
一.BOM 概述
1 什么是 BOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。
2.BOM的构成
BOM 比 DOM 更大，它包含 DOM。
window 对象是浏览器的顶级对象，它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
注意：window下的一个特殊属性 window.name
二.window 对象的常见事件
1 窗口加载事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等), 就调用的处理函数。
注意：
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，
再去执行处理函数。 - window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
户的体验，此时用 DOMContentLoaded 事件比较合适。
代码演示
<script>
// window.onload = function() {
// var but = document.querySelector('button')
// but.onclick = function() {
// alert('点击了')
// }
// }
// window.onload = function() {
// alert('22')
// }
window.addEventListener('load', function() {
var but = document.querySelector('button')
but.addEventListener('click', function() {
alert('11')
})
})
window.addEventListener('load', function() {
var but = document.querySelector('button')
but.addEventListener('click', function() {
alert('22')
})
})
//
window.addEventListener('DOMContentLoaded', function() {
var but = document.querySelector('button')
but.addEventListener('click', function() {
alert('33')
})
})
// load 等页面内容全部加载完毕 包含页面dom元素 图片 flash css等
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比load快一些
</script>
</head>
<body>
<button>点击</button>
</body>
2 调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数
注意
- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
代码演示
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
if (window.innerWidth <= 800) {
div.style.display = 'none'
} else {
div.style.display = 'block'
}
})
})
</script>
<div></div>
</body>
三.定时器
1.俩种定时器
window对象给我们提供了2个非常好用的方法-定时器
- setTimeout( )
- setInterval( )
2.开启定时器 setTimeout( )
window.setTimeout(调用函数，延迟的毫秒数)；
setTimeout( )方法用于设置一个定时器，该定时器在定时器到期后执行调用函数 也就是到时间了你想干什么。
代码演示
<body>
<script>
// 1.setTimeout
// 语法规范 window.setTimeout(调用函数，延迟时间)
// (1).这个window在调用的时候可以省略掉
// (2).这个延迟的时间单位是毫秒 1000毫秒=1秒 但是可以省略，如果省略了就是立马执行
// (3).这个调用函数可以直接 写函数不用加上小括号 还有一种写法'函数名()'
// (4).页面中可能有很多的定时器 我们经常给定时器加标识符(简单理解就是取一个名字)
// setTimeout(function() {
// console.log('时间到了');
// }, 2000)
function fn() {
console.log('弹出了');
}
var timer1 = setTimeout(fn, 3000)
var timer2 = setTimeout(fn, 5000)
// setTimeout('fn()', 5000) 不提倡使用
</script>
</body>
setTimeout( )这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数，需要等待时间，时间到了才去调用这个函数
简单理解为：回调，就是回头调用的意思，上一件事干完，在回头在调用这个函数
停止定时器 clearTimeout(定时器的名字)
window.clearTimeout(定时器的名字)
clearTimeout( ) 方法取消了先前通过调用setTimeout（）建立的定时器 widow可以省略掉
代码演示
<body>
<button>停止定时器</button>
<script>
var but = document.querySelector('button');
var timer = setTimeout(fn, 5000)
function fn() {
console.log('爆炸了');
}
but.addEventListener('click', function() {
// 停止定时器 clearTimeout( )
clearTimeout(timer)
})
</script>
3.开启定时器 setInterval( )
window.setInterval(回调函数，间隔的毫秒数)；
setInterval( ) 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
代码演示
<body>
<script>
// 1.setInterval
// 语法规范 window.setTimeout(调用函数，延迟时间)
// (1).这个window在调用的时候可以省略掉
// (2).这个延迟的时间单位是毫秒 1000毫秒=1秒 但是可以省略，如果省略了就是立马执行
// (3).这个调用函数可以直接 写函数不用加上小括号 还有一种写法''函数名()'
// (4).页面中可能有很多的定时器 我们经常给定时器加标识符(简单理解就是取一个名字)
setInterval(function() {
console.log('重复执行');
}, 1000)
</script>
</body>
停止定时器 clearInterval(定时器的名字)
window.clearInterval(定时器的名字)
clearInterval( )方法取消了先通过调用setInterval（）建立的定时器
代码演示
<body>
<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(fn, 1000) //注意：这里不能直接在里面给定时器取名字，因为这是在函数内部局部变量，在外面是不能使用的
})
function fn() {
console.log('你好啊');
}
stop.addEventListener('click', function() {
// 关闭定时器 clearInterval(定时器的名字) 小括号里面的参数结束定时器的标识符
clearInterval(timer)
})
</script>
</body>
setTimeout和setInterval的区别：
setTimeout：延迟时间到了，就去调用这个回调函数，只能调用一次，就结束了这个定时器
setInterval：每隔这个延迟时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
四.JS 执行机制
1.JS 是单线程
- JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚
本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对
某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。 - 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果
JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
2.同步和异步
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创
建多个线程。于是，JS 中出现了同步和异步。
- 同步：同步就是前一个任务结束以后才去执行后一个的代码，依次执行
- 异步：异步就是在执行一个代码过程的时候可以同时进行多个代码执行
他们的区别在于：执行的流程顺序不同
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。
3. JS 执行机制
- 先执行执行栈中的同步任务。
- 异步任务（回调函数）放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任
务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。
五. location 对象
1 什么是 location 对象
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为
这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
2.简单理解一下URL
统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有
一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
3. location 对象的属性
代码演示
一个简单的案例五秒钟之后自动跳转页面
<button>点击</button>
<div></div>
<script>
// ① 利用定时器做倒计时效果
// ② 时间到了，就跳转页面。 使用 location.href
var but = document.querySelector('button');
var div = document.querySelector('div');
var timer = 5;
but.addEventListener('click', function() {
// console.log(location.href); 直接输出是拿到URL地址 也可以重新赋值
// location.href = 'http://www.baidu.com'
setInterval(fn, 1000)
fn()
function fn() {
if (timer == 0) {
location.href = 'https:www.sina.com.cn'
} else {
div.innerHTML = '你将在' + timer + '秒钟后跳转到首页'
timer--;
}
}
})
</script>
</body>
4.location的方法
代码演示
<body>
<button>点击一下</button>
<script>
var but = document.querySelector('button')
but.onclick = function() {
// 1.location.assign记录浏览历史可以实现后退功能
// location.assign('http://www.baidu.com')
// 2.location.replace不记录浏览历史，不能实现倒退功能
// location.replace('http://www.baidu.com')
// 3.重新加载页面的意思，相当于刷新
location.reload('http://www.baidu.com')
}
</script>
</body>
六. navigator 对象
- navigator对象包含了很多浏览器的信息，和属性最常用的是userAgent，该属性可以返回用户由客户发送服务器的user-agent头部的值
下面前端代码可以判断用户是使用PC终端还是移动端打开页面如果是PC端打开就进入PC端的页面如果是使用移动端就打开移动端页面，实现跳转
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 = ""; //电脑
}
7. history 对象
window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）
访问过的 URL。
代码演示
<body>
<a href="20.html">点击去往列表</a>
<button>前进</button>
<script>
var but = document.querySelector('button')
but.addEventListener('click', function() {
// 前进功能
// history.forward()
// 前进后退功能，如果参数是1则前进一个页面，如果参数是-1后退一个页面
history.go(1)
})
</script>
</body>
8.screen对象
screen提高用户显示屏幕的相关属性，比如宽度，高度，可用宽度，可用高度
代码演示
console.log(screen.width); //屏幕得宽度
console.log(screen.height); //屏幕的高度
console.log(screen.availWidth); //屏幕的可用宽度
console.log(screen.availHeight); //屏幕的可用高度
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
