目录
4. 定时器window.setTimeout(调用函数,延迟的时间)
5. window.clearTimeout(定时器的名字) 停止定时器
6. window.setInterval(回调函数,延迟时间) 重复调用这个函数
7. window.clearInterval(定时器的名字) 停止定时器
一、什么是BOM
BOM是浏览器对象模型:提供了独立于内容而与浏览器窗口进行交互的对象,核心是window
BOM是由一系列相关的对象构成,并且每个对象都提供了很多方法和属性
window对象是浏览器的顶级对象,有双重角色
1、它是js访问浏览器窗口的接口
2、它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。在调用的时候可以省略window。如:alert、prompt等
二、window对象常见的事件
1. window.onload 窗口加载事件
当文档内容完全加载完成后触发该事件(包括图像、脚本文件、css文件等),就调用的处理函数
注意:
-
有了window.onload就可以把js代码写到元素的上方,因为onload是等页面内容全部加载完毕才执行
-
window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个为准
-
如果使用addEventListener则没有限制
window.addEventListener('load', function() {
alert(11);
});
2. DOMContentLoaded
是DOM加载完毕,不包括图片,flash、css等就可以执行,加载速度比load更快一些
document.addEventListener('DOMContentLoaded', function() {
alert(22);
});
3. window.onresize
调整窗口大小事件,当触发时就调用的处理函数
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';
}
})
4. 定时器window.setTimeout(调用函数,延迟的时间)
-
1、window可以省略
-
2、延迟的时间是毫秒数,可以省略,默认是0
-
3、调用函数可以写在外面,里面写函数名即可
-
4、一个也页面中定时器会有很多,所以经常会给定时器赋值一个标识符(名字)
// setTimeout(function() {
// console.log('2秒后爆炸');
// }, 2000)
function callback() {
console.log('爆炸');
}
var time1 = setTimeout(callback, 2000);
var time2 = setTimeout(callback, 5000);
5. window.clearTimeout(定时器的名字) 停止定时器
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log("5 秒后爆炸");
}, 5000)
btn.addEventListener('click', function() {
clearTimeout(timer);
})
6. window.setInterval(回调函数,延迟时间) 重复调用这个函数
var timer = setInterval(function() {
console.log("我会被重复调用输出");
}, 1000)
7. window.clearInterval(定时器的名字) 停止定时器
var begin = document.querySelector('.begin');
var end = document.querySelector('.end');
var timer = null; // 定义一个全部变量,赋值为null,因为null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log(11);
}, 1000)
})
end.addEventListener('click', function() {
clearInterval(timer);
})