JS.3-BOM,window对象常见事件, 定时器, JS执行队列, location对象, navigator对象, history对象

Mteee.

已于 2022-12-12 19:32:16 修改

阅读量1.7k

点赞数 5

分类专栏： web 文章标签： javascript 前端开发语言

于 2022-07-24 14:47:10 首次发布

本文链接：https://blog.csdn.net/qq_54379580/article/details/125816478

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一.BOM概述

1.概念：

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分

2.DOM和BOM比较

3.BOM构成

window对象是浏览器的顶级对象，双重角色：

是JS访问浏览器窗口的一个接口
是一个全局对象, 定义在全局作用域中的变量,函数都会变成 window 对象的属性和方法,在调用的时候可以省略 window，对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意：

window下的一个特殊属性 window.name 打印返回空的字符串
BOM包含DOM, 完整写法: window.document.querySelector();

二.window对象常见事件

1.窗口加载事件

(1)window.onload

window.onload = function(){} ;
当页面内容完全加载完成之后会触发该事件(含图像,脚本文件,css,文件等),就调用的处理函数
传统注册事件方式,只能写一次,若有多个,以最后一个 window.onload 为准,前边的都会被覆盖

(2)addEventListener

window.addEventListener("load",function(){});
不会被覆盖,多个也可生效,无限制

(3)DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){});
事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等. Ie9以上才支持
若页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适

2.调整窗口大小事件

(1)window.onresize

window.onresize = function(){}; 调整窗口大小加载事件,当触发时就调用的处理函数
只要窗口大小发生像素变化,就会触发这事件
响应式布局, window.innerWidth 当前屏幕的宽度; window.innerHeight 当前屏幕的高度

(2)resize

window.addEventListener("resize",function(){});

三.定时器

1.setTimeout()

window.setTimeout(调用函数,[延迟的毫秒数]); 设置一个定时器,在定时器到期后执行调用函数

注意：

window 可以省略, 延迟的毫秒数单位毫秒, 省略默认是0
写法: ①写函数,②写函数名,③字符串形式函数名 '函数名()' 但不提倡
定时器可能有很多，可给定时器赋值一个标识符,实现多个定时器

回调函数callback

普通函数是按照代码顺序直接调用.
回调函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。(回头调用, 上一件事干完，再回头再调用这个函数)
element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数setTimeout() 都是回调函数。

2.clearTimeout()

window.clearTimeout(timeoutID); 停止setTimeout()建立定时器

注意: window 可以省略; 里面的参数就是定时器的标识符

3.setInterval()

window.setInterval(回调函数, [间隔的毫秒数]); 间隔时间,就反复调用一次回调函数

注意:

window 可以省略, 间隔的毫秒数单位毫秒, 间隔多久就调用一次这个函数, 省略默认是0
写法: ①写函数,②写函数名,③字符串形式函数名 '函数名()' 但不提倡
定时器可能有很多，可给定时器赋值一个标识符,实现多个定时器
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

4.clearInterval()

window.clearInterval(intervalID); 取消setInterval()建立的定时器

注意: window 可以省略; 里面的参数就是定时器的标识符

    <button class="btn1">clearTimeout</button>
	<button class="btn2">clearInterval</button>
	<script>
		// 1. window.setTimeout(调用函数,延时时间);  调用时,window可省  延时时间单位毫秒,省略默认为0
		// 方法1   写函数  
/* 		setTimeout(function(){  
			console.log('时间到了')
		},2000); 
		//方法2  写函数名
		setTimeout(callback,3000);  
		function callback(){
			console.log('爆炸!!!!!!!!')
		};
		// 方法3   字符串形式函数名 '函数名()'   不提倡
		setTimeout('callback()',9000);
		//    给赋标识符,就可以实现多个定时器
		var time1 = setTimeout(callback,5000); 
		var time2 = setTimeout(callback,7000);
		 */
		
		// clearTimeout()  停止setTimeout()定时器
		var btn1 = document.querySelector('.btn1');
		var timer1 = setTimeout(function(){
			console.log('qqq');
		},2000);
		btn1.addEventListener('click',function(){
			clearTimeout(timer1);
			console.log('q');
		});
		
		// 2. setInterval(回调函数,[间隔毫秒数]);   间隔时间,反复调用一个函数
		/* setInterval(function(){
			console.log('33333')
		},2000); */
		
		// clearInterval()  停止setTimeout()定时器
		var btn2 = document.querySelector('.btn2');
		var timer2 = setInterval(function(){
			console.log('www');
		},2000);
		btn2.addEventListener('click',function(){
			clearInterval(timer2);
			console.log('w');
		});

5.this

this指向问题: 一般情况,this最终指向那个调用他的对象

全局作用域或普通函数中this指向全局对象window (注意:定时器中的this指向window)
方法调用中this指向调用者这个对象

构造函数this指向构造函数的实例(new开辟空间,创建空对象,this指向新的空对象,实例化后赋值给实例对象,故this指向实例对象)

		<!-- this指向问题   一般情况,this最终指向那个调用他的对象 -->
		<script>
			// 1.全局作用域 或 普通函数中this指向全局对象window (注意:定时器中的this指向window)
			console.log(this);  //指向Window对象
			function fn(){
				console.log(this); //指向Window对象
			}
			window.fn();   //window可省
			setTimeout(function(){
				console.log(this);   //指向Window对象
			},1000);
			
			// 2.方法调用中this指向
			var a = {
				sayHi: function(){
					console.log(this);  //指向调用者a这个对象
				}
			}
			a.sayHi();
			var btn = document.querySelector('button');
			btn.onclick = function(){
				console.log(this);  //指向btn按钮对象
			}
			
			// 3. 构造函数this指向构造函数的实例
			function Fun(){
				console.log(this); //指向fun实例对象
			}
			var fun = new Fun();  //new开辟空间,创建空对象,this指向新的空对象,实例化后赋值给标识符fun,故this指向fun
		</script>

四.JS执行队列

1.JS是单线程

JavaScript 语言的一大特点就是单线程, 同一个时间只能做一件事。
因为JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。e.g: 对某个 DOM 元素进行添加和删除操作，不能同时进行, 应该先进行添加,之后再删除
单线程意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务.
这样所导致的问题是: 如果 JS 执行的时间过长,就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

2.同步和异步

利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程. 于是，JS 中出现了同步和异步
本质区别：这条流水线上各个流程的执行顺序不同

(1)同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的

同步任务: 都在主线程上执行，形成一个执行栈

(2)异步

做一个任务的同时,也可去处理其他任务

异步任务: JS 的异步是通过回调函数实现的, 一般而言，异步任务有以下三种类型:

普通事件，如 click、resize 等
资源加载，如 load、error 等
定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）