Web API BOM:构成、顶级对象window、window对象的常见事件、setTimeout() 定时器、setInterval() 定时器、this指向问题
目录
- 1、什么是BOM
- 2、BOM的构成
- 3、顶级对象window
- 4、window对象的常见事件
- 页面（窗口）加载事件
- 第1种
- 第2种
- 调整窗口大小事件
- 5、定时器
- (1)、setTimeout() 定时器
- 开始定时器
- 案例：5秒后关闭广告
- 停止定时器
- (2)、setInterval() 定时器
- 开启定时器
- 案例：倒计时(秒杀之类的)
- 停止定时器
- 案例：发送短信验证码倒计时
- 6、this指向问题
学习来源： https://www.bilibili.com/video/BV1HJ41147DG
1、什么是BOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准。JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。
2、BOM的构成
BOM 比 DOM 更大，它包含 DOM。
3、顶级对象window
window对象是浏览器的顶级对象，它具有双重角色。
1、它是JS访问浏览器窗口的一个接口。
2、它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
注意
window下的一个特殊属性 window.name
示例
<script>
var num = 10;
console.log(num);
console.log(window.num); // 完整的调用方法
function fn() {
console.log(11);
}
fn();
window.fn();
// var name = 10;
console.log(window.name); // 已经给name赋过值，即使只是掉，再调用也还是那个值
</script>
4、window对象的常见事件
页面（窗口）加载事件
第1种
语法
window.onload = function () { }
// 或
window.addEventListener('load', function () { })
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
注释
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕(包含页面dom元素、图片、flash、css等)，再去执行处理函数。
- window.onload 传统注册事件方式只能写一次， 如果有多个，则会以最后一个 window.onload 为准。
- 如果使用 addEventlistener 则没有限制。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1、2、4 结果一样，点击“点击”按钮，弹出“点击我” -->
<!-- 2、3 的结果是弹出 22，点击“点击”按钮，不能弹出“点击我” -->
<!-- 4、5 的结果是弹出 22，点击“点击”按钮，弹出“点击我” -->
<!-- 试验这些时，别忘记注释掉其它的 -->
<script>
// 2
window.onload = function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
}
// 3
window.onload = function () {
alert(22);
}
// 4
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
})
// 5
window.addEventListener('load', function () {
alert(22);
})
</script>
</head>
<body>
<button>点击</button>
<!-- 1 -->
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
</script>
</body>
</html>
第2种
语法
document.addEventListener('DOMContentLoaded', function () { })
注释
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded 事件比较合适。(加载速度比 load 更快一些)
示例
<script>
window.addEventListener('load', function () {
alert(22);
})
document.addEventListener('DOMContentLoaded', function () {
alert(33);
})
// 即使 DOMContentLoaded 在 load 下面，执行时也是先弹出 33 ，再弹出 22
</script>
调整窗口大小事件
语法
window.onresize = function () { }
// 或
window.addEventListener('resize', function () { })
注释
- window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数
- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 注册页面加载事件
window.addEventListener('load', function () {
// 注册调整窗口大小事件
var div = document.querySelector('div');
window.addEventListener('resize', function () {
// window.innerWidth 获取窗口大小
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5、定时器
window 对象给我们提供了两个非常好用的方法 —— 定时器
- setTimeout()
- setInterval()
(1)、setTimeout() 定时器
开始定时器
语法
window.setTimeout(调用函数, [延迟的毫秒数]);
注释
- setTimeout() 用于设置一个定时器，该定时器再定时器到期后执行调用函数，只调用一次。
- setTimeout() 这个调用函数也称为 回调函数 callback
- 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数
- element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。
- window 在调用时可以省略
- 这个调用函数可以直接写函数，或者写函数名，或者采取字符串 ‘函数名()’ 三种形式。(第三种不推荐)
- 延迟的毫秒数可以省略，默认是0；如果写，必须是毫秒。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
- 普通函数是按照代码顺序直接调用
示例
<script>
// 第一种 直接写函数
setTimeout(function () { console.log('时间到了'); }, 2000);
function boom() {
console.log('爆炸了');
}
// 第二种 写函数名
setTimeout(boom, 3000);
function end() {
console.log('终止');
}
// 第三种 字符串 '函数名()'
setTimeout('end()', 4000); // 不提倡这个写法
// 赋值一个标识符
// var time1 = setTimeout(callback, 3000);
// var time2 = setTimeout(callback, 5000);
</script>
案例：5秒后关闭广告
<img src="images/ad.jpg" alt="">
<script>
var img = document.querySelector('img');
setTimeout(
function () {
img.style.display = 'none';
}, 5000);
</script>
停止定时器
语法
window.clearTimeout(timeoutID)
注释
- clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器。
- window可以省略。
- 里面的参数就是定时器的标识符。
示例
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
// 开启定时器
var timer = setTimeout(function () {
console.log('爆炸了');
}, 5000);
// 给按钮注册单击事件
btn.addEventListener('click', function () {
// 停止定时器
clearTimeout(timer);
})
</script>
(2)、setInterval() 定时器
开启定时器
语法
window.setInterval(调用函数, [间隔的毫秒数]);
注释
- setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。(setTimeout() 只调用一次)
- window可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名()'三种形式。
- 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
- 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
示例
<script>
// 1. setInterval
setInterval(function() {
console.log('继续输出');
}, 1000);
</script>
案例：倒计时(秒杀之类的)
相关链接：https://blog.csdn.net/qq_45645902/article/details/105875149
停止定时器
语法
window.clearInterval(intervalID);
注释
- clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器
- window 可以省略
- 里面的参数就是定时器标识符
示例
<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function () {
timer = setInterval(function () {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function () {
clearInterval(timer);
})
</script>
</body>
案例：发送短信验证码倒计时
相关链接：https://blog.csdn.net/qq_45645902/article/details/105875093
6、this指向问题
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，一般情况下 this 的最终指向的是那个调用它的对象。
- 全局作用域或者普通函数中 this 指向全局对象 window（注意定时器里面的 this 指向window）
- 方法调用中谁调用 this 指向谁
- 构造函数中 this 指向构造函数的实例
示例
<body>
<button>点击</button>
<script>
// 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
console.log(this); // this指向的是 Window 这个对象
function fn() {
console.log(this); // this指向的是 Window 这个对象
}
window.fn();
window.setTimeout(function () {
console.log(this); // this指向的是 Window 这个对象
}, 1000);
// 2. 方法调用中谁调用this指向谁
var o = {
sayHi: function () {
console.log(this); // this指向的是 o 这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function () {
console.log(this); // this指向的是 btn 这个按钮对象
}
btn.addEventListener('click', function () {
console.log(this); // this指向的是 btn 这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
console.log(this); // this 指向的是 fun 实例对象
}
var fun = new Fun();
</script>
</body>
