JavaScript学习记录——BOM部分

原创已于 2022-04-15 09:51:49 修改 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-11 17:28:36 首次发布

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了JavaScript中的BOM（浏览器对象模型），重点讲解了window对象、页面加载事件、窗口大小调整事件、定时器（setTimeout和setInterval）的使用，以及this的指向问题。通过实例展示了如何监听按钮点击事件、优化页面加载体验和实现响应式布局。此外，还提及了location和history对象在页面导航中的作用。

JavaScript学习记录——BOM部分

BOM概述

BOM是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
缺乏标准，JavaScript的语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
在这里插入图片描述
BOM的构成
BOM比DOM更大

document.querySelector其实应该是windows.document.querySelector
window对象是浏览器的顶级对象，具有双重角色
是js访问浏览器窗口的一个接口
是一个全局对象定义在全局作用域中的变量和函数都会变成window对象的属性和方法在调用的时候可以省略Window
window对象是浏览器的顶级对象具有双重角色

页面加载事件

<button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            alert('点击我');
        })
    </script>

给button注册事件的时候必须要写在button后，并且写在script中
但是加了window.onload后则可以放在外面

  <script>
        window.onload = function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我');
            })
        }
    </script>
    <button>点击</button>

window.onload传统注册事件方式只能写一次如果有多个会以最后一个为准

<script>
        window.addEventListener('load',function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我');
            })
        })
    </script>
    <button>点击</button>

或者用window.addEventListener（推荐）写多少个都可以不会冲突
窗口加载事件：document.addEventListener(‘DOMContentLoaded’,function() {} )
DOMContentLoaded事件触发的时候，仅当DOM加载完成，不包含样式表、图片、flash等在页面图片较多的时候提高用户体验（加载快）
load等页面内容加载完毕，包含页面dom元素、图片、flash、css等才能执行

调整窗口大小事件

window.οnresize=function(){ }
window.addEventListener(“realize”,function(0 { } );
只要窗口大小发生像素变化就会触发这个事件常利用这个事件完成响应式布局 window.innerWidth当前屏幕宽度

定时器setTimeout

window.setTimeout（调用函数延时时间）
window在调用的时候可以省略
延时的时间单位是毫秒但是可以省略如果省略默认是0

 setTimeout(function() {
            console.log('时间到了');
        },2000)

或者

function callback() {
            console.log('时间到了');
        }
setTimeout(callback,5000);

页面中可能有很多定时器为了区分我们给定时器加标识符（名字）

var timer1 = setTimeout(callback,300);
var timer2 = setTimeout(callback,300);

setTimeout()这个调用函数也称为回调函数callback
普通代码是按照代码顺序直接调用
但是这个函数需要等待时间时间到了才去调用函数因此称为回调函数（回头调用）

停止计时setTimeout（）定时器
window.clearTimeout(timeoutID)
取消了先前通过调用setTimeout（）建立的定时器

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

定时器setInterval

和setTimeout类似但是setTimeout是延时的时间到了就去调用这个回调函数只调用一次就结束了这个定时器
但是setInterval每隔这个延时时间就去调用这个回调函数会重复调用很多次

this的指向问题

1.全局作用域或者普通函数中this指向全局对象window（注意定时器里的this指向window）

console.log(this);
        
function fn() {
            console.log(this)
        }
window.fn();

window,setTimeout(function() {
            console.log(this);
        },1000)

2.方法的this是谁调用就指向谁

var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            console.log(this);指向的是button
        })

js执行队列

js的一个特点就是单线程 就是说同一个时间只能做一件事
所以产生了一个问题就是如果js执行时间过长就会导致页面的渲染不连贯页面渲染加载阻塞
所以说出现了同步和异步异步就是允许任务同时进行

		console.log(1);
        setTimeout(function() {
            console.log(3);
        },1000);
        console.log(2);
        输出内容：1->2->3
        
		console.log(1);
        setTimeout(function() {
            console.log(3);
        },0);
        console.log(2);
        输出内容：1->2->3

同步任务
同步任务都在主线程上执行形成一个执行栈
异步任务
异步是通过回调函数实现的
有下面三个类型：
普通事件：click、realize等
资源加载：load、error等
定时器：setInterval、setTimeout等
异步任务会放到另一个任务队列（消息队列）中进行
在这里插入图片描述
主任务执行完毕后在执行任务队列的任务

由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环——反复检查是否有异步任务（有些异步任务需要onclick等操作才能唤醒）被遗漏