JavaScript基础学习之BOM1

最新推荐文章于 2024-09-29 11:29:55 发布

m0_60081294

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量99

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_60081294/article/details/129812258

版权

BOM

BOM ( BrowserObject Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

DOM	BOM
文档对象模型	浏览器对象模型
把「文档」当做一个「对象」来看待	把「浏览器」当做一个「对象」来看待
顶级对象是document	顶级对象是window
主要学习的是操作页面元素	学习的是浏览器窗口交互的一些对象

window对象是浏览器的顶级对象，它具有双重角色。

1．它是JS访问浏览器窗口的一个接口。
2、它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

window对象的常见事件

1、窗口加载事件

window.onload=function(){}

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

Note:该函数使得我们可以将js代码写到代码的任意位置，但是该传统方式只能添加一次。如果有多个，以最后一次的为准。

window.addEventlistener("load", function(){});  //可添加多次

document.addEventListener('DOMContentLoaded', function(){})

load 等页面内容全部加载完毕，包含页面dom元素图片flash css
DOMContentLoaded 是DON加载完毕，不包含图片 falsh css等就可以执行，加载速度比load更快一些。

定时器

window.setTimeout(调用函数， 延迟时间);

调用函数可以直接写，也可以写函数名。 //定时器中的this指向window

清除定时器 window.clearTimeout(timeoutID)

var timer= setTimeout(function(){
    console.log('爆炸');
},5000);   //5000毫秒  =5秒

btn.addEventListener('click', function(){
    clearTimeout(timer);
})

setInterval（调用函数，时间）每间隔时间就调用函数，会一直重复

clearInterval(intervalID) //停止setInterval() 定时器

JS同步与异步

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

异步任务
JS的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型

1、普通事件，如click、resize等

                2、资源加载，如load、error等
                3、定时器，包括setlnterval、setTimeout等
        异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。执行完栈中的同步任务，任务队列中的函数进入栈来完成。