本文详细介绍了JavaScript的BOM，包括BOM的构成、window对象的事件（如窗口加载和调整大小）、定时器的使用、this关键字的理解、JS执行机制以及location对象和history对象的应用。通过案例解析了如何实现页面自动跳转和数据传递等功能。
1. BOM概述
1.1 什么是BOM
BOM ( BrowserObject Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
1.2 BOM的构成
window对象是浏览器的顶级对象，它具有双重角色。
-
它是JS访问浏览器窗口的一个接口。
-
它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
2. window对象的常见事件
2.1 窗口加载事件
window.onload = function () {};
或者
window.addEventListener('load',function(){});
window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
注意：
-
有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
-
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
2.2 调整窗口页面大小事件
resize
3. 定时器（回调函数）
3.1 setTimeout
-
window.setTimeout(调用函数，延时时间);
-
延时单位是毫秒，可省略，默认是0；
-
这个调用函数可以直接写函数，还可以写函数名。
3.1 直接写函数
setTimeout(function () { console.log('时间到了'); }, 2000);3.2 写函数名
function callback() { console.log('爆炸了'); } setTimeout(callback, 3000); -
清除定时器clearTimeout(定时器名字)
因为清除定时器要指明清除哪个定时器，所以要给定时器起一个名字，即赋值给一个变量。
var btn = document.querySelector('button'); var timer = setTimeout(function () { console.log('boom!'); }, 5000); btn.addEventListener('click', function () { clearTimeout(timer); })
3.2 setInterval
-
window.setTimeout(调用函数，延时时间);
setInterval(function () { console.log('im setinterval'); }, 2000); -
延时单位是毫秒，可省略，默认是0；
-
与setTimeout不同的是，setInterval是每隔“延时时间”间隔就调用一次，属于重复调用。
-
清除定时器clearInterval(定时器名字)
<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('riki'); }, 1000); }) stop.addEventListener('click', function () { clearInterval(timer); }) </script>
3.3 倒计时案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv
最低0.47元/天 解锁文章
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
