BOM

最新推荐文章于 2025-10-19 14:43:19 发布

原创最新推荐文章于 2025-10-19 14:43:19 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

关于BOM
BOM（browserObjectModel）即浏览器对象模型，它提供了独位于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，而且每个对象都提供了很多方法和属性

浏览器对象模型
BOM的顶级对象是window
BOM是浏览器窗口交互的一些对象
BOM是浏览器厂商在在各自浏览器上定义的，兼容性较差
window:(包括以下)
- document;
- location;
- navigation;
- screen;
- history
- BOM是JS访问浏览器窗口的一个借口
- BOM是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法
window下的一个特殊属性window.name

①窗口加载事件

window.onload = function(){}
window.addEventLIstener(“load”,function(){});
DOMContentLoaded这个是DOM加载完毕，不包含图片，falsh css等就可以执行，加载速度更快一些
这是窗口加载事件，当文档内容完全加载完成后就会触发该事件（包括图像，脚本事件，css文件等等。就调用的处理函数）所以i这里可以把js放在页面元素的上方，因为onload等页面加载完毕后再去执行函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
如果使用addEventListener则没有原则

//用这种方法可以实现多次个加载
window.addEventListener('load',function(){
          var btn = document.querrySelector('button');
          btn.addEventListener('click',function){
              alert('点击我')；
            })
       }）

②调整窗口大小事件

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

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

③两种定时器

setTimeout（调用函数，[延迟的毫秒数]）；用于设置一个定时器，该定时器到期后执行调用函数
经常给定时器起一个名字来区别多个定时器
var timer1 = setTimeout();当清除定时器的时候clearTimeout（就是这个定时器的名字）。
setinterval(回调函数，[间隔的毫秒数])；
它会在一定的时间间隔里反复调用这个函数
清除定时器，clearInterval。这里要注意我们给定时器起名字的时候，要让他成为全局变量。

//写一个案例，关于发送短信的时间限制3秒
<button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click',function(){
             btn.disable = true;
             var timer = setInterval(function(){
                 if (timer == 0){
                     clearInterval(timer);
                     btn.disabled = false;
                     btn.innerHTML = '发送';
                     time = 3;
                 }else{
                     btn.innerHTML = '还剩下' + time + '秒'；
                     timme--;
                 }
             },1000)
        })
    </script>

④this的指向问题

this指向在函数定义的时候时确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向是调用它的那个函数

⑤js单线程

js的特点是单线程，也就是说，同一个时间只能做一件事情。这是因为这门脚本语言诞生的使命所致，js是为处理页面中用户的交互，以及操作DOM而诞生的。你比如说，你不能同时对一个元素进行删除和添加操作。

同步和异步

同步：前一个任务结束后再去执行另外一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。好比你先说话再吃东西；
异步：在处理一个任务的时候同时处理另外一个任务，一边吃饭一边说哈。

//看这个
console.log(1);
setTimeout(function(){
     console.log(3);
     },0);
console.log(2);
//123

同步任务和异步任务

同步任务：同步任务在主线程上执行。形成一个执行栈
异步任务：通过回调函数来实现的。如下
- 1.普通事件，如click，resize等
- 2.资源加载，如load，error等
- 3.定时器，包括setinterval，setTimeout等
- 异步任务相关回调函数添加到任务列表中（任务队列也称为消息队列）