概述
BOM是浏览器对象模型
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
DOM和BOM的区别
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
DOM就是把文档当作一个对象 | 把浏览器当做一个对象来看 |
DOM的顶级对象是 document | BOM的顶级对象是 window |
DOM学习的是操作页面元素 | BOM学习的是浏览器窗口交互的一些对象 |
DOM是W3C标准规范 | BOM是浏览器厂商在各自浏览器上定义的,兼容性较差 |
window对象常见事件
页面(窗口)加载事件(2种)
第1种
window.onload = function(){}
或者
window.addEventListener(" load" , function(){} )
window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数
- 传统注册事件方式只能注册一次
- 有了window.onload就可以把js代码写到页面元素的上方
- 如果使用addEventListener则没有限制
第二种
document.addEventListener(“DOMContentLoaded” , function(){} )
DOMContentLoadesj触发时。仅当DOM加载完成,不包含样式表,图片,flash等
图片较多时可使用
概要
- load等页面内容全部加载完毕,包含页面dom元素图片flash,CSS等等
- DOMContentLoaded是DOM 加载完毕,不包含图片falsh css 等就可以执行加载速度比load更快一些
调整窗口大小事件
window. onresize = function() { }
或
window . addEventLi stener (“resize”, function() {}) ;
window. onresize时调整窗口大小加载事件,当触发时就调用的处理函数
注意
- 只要窗口大小发生像素变化,就会触发这个事件
- 经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
定时器(重要)
window 对象给我们提供了 2 个非常好用的方法——定时器。
-
setTimeout()
-
setInterval()
setTimeout() 炸弹定时器
开启定时器
window.setTimeout(调用函数,延迟事件毫秒)
该定时器是在时间到期后执行的调用函数(回调函数)。
回调函数callback
- 这个函数需要等待时间,时间到了采取调用这个函数,因此称为回调函数
- setTimeout(),onclick都是回调函数
- 回调,就是回头调用的意思。上意见事干完,在回头再调用这个函数
- window可以省略
- 这个调用函数可以直接写函数,或者写函数名 或者采取字符串’函数名()'三种形式。第三种不推荐
- 延迟的毫秒数可以省略,默认是0
- 因为定时器很多,所以我们经常给定时器赋值一个标识符(名字)。
案例:5秒后关闭广告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
// 获取要操作的元素
var ad = document.querySelector('.ad');
// 开启定时器
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
停止定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器
注意
- window可以省略
- 里面的参数就是定时器的标识符
setInterval() 闹钟定时器
开启定时器
window.srtInterval(调用函数,延迟事件毫秒)
重复调用一个函数,每个一段时间就去调用一次回调函数
注意:
- window可以省略
- 这个还能输调用可以直接写函数,或者写函数名 或者采取字符串’函数名()'三种形式。第三种不推荐
- 延迟的毫秒数可以省略,默认是0
- 因为定时器很多,所以我们经常给定时器赋值一个标识符(名字)。
倒计时案例
案例分析:
- 这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)
- 三个黑色盒子里面分别存放时分秒
- 三个黑色盒子利用innerHTML放入计算的小时分钟秒数
- 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
- 最好采取封装函数的方式,这样可以先调用一次这 个函数,防止刚开始刷新页面有空白问题
<!DOCTYPE html>
<html lang="en">
<head>