JavaScript——BOM

最新推荐文章于 2024-06-06 13:48:59 发布

原创最新推荐文章于 2024-06-06 13:48:59 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

本文详细介绍了BOM中的window对象及其常见事件，包括窗口加载、调整大小、定时器（setTimeout和setInterval）的使用案例，以及location对象的特性、URL处理和方法。同时探讨了同步与异步的概念及执行机制。

3.2 停止setTimeout（）定时器

3.3 setInterval ( ) 定时器

案例——倒计时

3.4 停止setInterval()定时器

一、BOM概述

BOM（Browser Object Model）即浏览器对象模型。它提供了独立与内容而与浏览器窗口进行交互的对象，其核心对象时window。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

BOM缺乏标准，JavaScript语法的标准组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

1. 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事件较合适。

2. 调整窗口大小事件

window.onresize=function(){}
window.addEventListener("resize",function(){})

window.onresize是调整窗口大小加载事件，当触发时就调用处理函数。

注意：

只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕宽度。

	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
	<body>
		<script type="text/javascript">
		window.addEventListener('load',function(){
			var div=document.querySelector('div');
			window.addEventListener('resize',function(){
				console.log('变化了');
				if(window.innerWidth <= 800){
					div.style.display='none';
				}else{
					div.style.display='block';
				}
			})
		})
		</script>
		<div></div>
	</body>

3. 定时器

window对象提供两种定时器

3.1 setTimeout定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout（）方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意：

window在调用时可省略。
这个延迟时间时毫秒可以省略，若省略默认值为0。
这个调用函数可以直接写函数，还可以写函数名，或采用 '函数名（）' 第三种不推荐
页面中有很多定时器，经常给定时器加标识符。

<script>
	function call(){
		console.log('3s到了');
	}
	var time1 = setTimeout(call,3000);
    var time2 = setTimeout('call()',5000);    //这种写法不提倡
</script>

setTimeout（）这个调用函数我们也称回调函数callback。

简单理解：回调，就是回头调用的意思。

比如我们讲的element.onclick（）或者element.addEventListener（"click"，fn）里的函数都是回调函数。