JavaScript学习笔记——BOM（上）

最新推荐文章于 2022-07-27 00:08:23 发布

soEzLife

最新推荐文章于 2022-07-27 00:08:23 发布

阅读量233

点赞数

分类专栏：学习总结前端 JavaScript

本文链接：https://blog.csdn.net/qq_41591033/article/details/100014160

版权

学习总结同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

27 篇文章 0 订阅

订阅专栏

JavaScript

24 篇文章 0 订阅

订阅专栏

1. BOM概述

1.1 什么是BOM

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

DOM	BOM
文档对象模型	浏览器对象模型
把文档当作一个对象看待	把浏览器当作一个对象看待
DOM顶级对象是document	BOM顶级对象是window
DOM主要学习操作页面元素	BOM主要学习浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商自定义，兼容性较差

1.2 Bom构成

BOM比DOM更大，它包含DOM
window对象是浏览器的顶级对象，他具有双重角色

它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法（在调用时可省略window）
如window.alert()可以写成alert()

2. window对象的常见事件

2.1 窗口加载事件

  window.onload = function(){};
  window.addEventListener('load', function(){});

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

使用window.onload可以把JS代码写在页面元素上方
window.onload传统注册事件方法只能写一次，如有多个，以最后一次为准
使用addEventListener无限制

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

DOMContentLoaded事件在DOM加载完成时就会触发（不包括样式表，图片，flash等等）
如果页面图片较多，加载时间过长，为避免影响交互，使用DOMComtentLoaded（IE9以上支持）

2.2 调整窗口大小事件

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

window.onresize是调整窗口大小加载事件
注意

只要窗口大小发生像素变化，则触发该事件
可利用该事件完成响应式布局，window.innerWidth表示当前屏幕宽度

        window.addEventListener('resize', function(){
            console.log(innerWidth);
            if(window.innerWidth <= 800){
                alert('宽度小于800了');
            }
        });

3. 定时器

3.1 两种定时器

window对象提供了两种好用的定时器

setTimeout()
- 语法规范：window.setTimeout(回调函数，延时时间)；
- window可省略
- 延时时间单位为毫秒，若省略默认为0
- 回调函数可直接写函数，也可写函数名

        setTimeout(function(){
            alert('恭喜发财');
        }, 3000);

        function callback(){
            alert('恭喜发财');
        }
        setTimeout(callback, 3000);

setIntervel()
- 语法规范：window.setInterval(回调函数，延时时间)；
- window可省略
- 延时时间单位为毫秒，若省略默认为0
- 回调函数可直接写函数，也可写函数名或采取’函数名()'三种形式
- 因为定时器可以有很多，所以经常给定时器赋值一个标识符

注意：
	1.setTimeout()：延时时间到了，就去调用回调函数，只调用一次，然后结束定时器
	2.setInterval():每隔一个延时时间，就去调用回调函数，直到清除定时器

3.2 停止setTimeout()定时器

window.clearTimeout(定时器ID)；

clearTimeout()方法取消先前通过setTimeout()建立的定时器

<body>
    <button>取消定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function(){
            alert('boom！');
            
        }, 3000);
        btn.addEventListener('click', function(){
            clearTimeout(timer);
        });

    </script>
</body>

以上案例，点击取消定时器，阻止定时炸弹爆炸

3.3 停止setInterval()定时器

window.clearInterval(定时器ID)

clearInterval()方法取消先前通过setInterval()建立的定时器

<body>
    <button class="btn01">人类的本质就是复读机！</button>
    <button class="btn02">人类的本质不是复读机！</button>

    <script>
        var btn01 = document.querySelector('.btn01');
        var timer = null;//定义为全局变量并赋值为null
        btn01.addEventListener('click', function(){
            clearInterval(timer);//避免定时器累加
            timer = setInterval(function(){
                console.log('你好吗？');
            },1000);
        });

        var btn02 = document.querySelector('.btn02');
        btn02.addEventListener('click', function(){
            clearInterval(timer);
        });

    </script>
</body>

案例:发送短信显示xx秒后可重新发送

案例分析

按钮点击后，disabled修改为true
按钮里的内容发生变化，（button里的内容通过innerHTML修改）
秒数需要用到定时器，每隔1秒调用一次
定义一个变量（倒计时秒数），在定时器里自减
如果变量为0，清除定时器，并复原按钮状态

<body>
    手机号码：<input type="text"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click', function(){
            var time = 3;
            btn.disabled = true;
            var timer = setInterval(function(){
                if(time == 0 ){
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3//需要重新开始
                }else{
                    btn.innerHTML = time + '秒后重新发送';
                    time--;
                }

            },1000)
        });
    </script>
</body>

3.4 this指向问题参考链接：《彻底弄懂js中的this指向》

一般情况下this最终指向的是那个调用它的对象

在方法调用中，谁调用方法，this就指向谁

		//在方法调用中， 谁调用方法，this就指向谁
        var o = {
            sayHi:function(){
                console.log(this);//o
                
            }
        }
        o.sayHi();

        var btn = document.querySelector('button');
        btn.addEventListener('click', function(){
            console.log(this);//指向的是btn这个按钮对象
        })

全局作用域或者普通函数中的this指向全局对象window（注意定时器里的this指向window），（函数可以看作window的方法）

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

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

构造函数中this指向构造函数的实例

		// 构造函数中this指向构造函数的实例
        function Fun(){
            console.log(this);
        }

        var fun = new Fun();

参考资料：
1.黑马程序员pink老师——常用Web APIs教程
2.《彻底弄懂js中的this指向》

soEzLife

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记——BOM（上）

1. BOM概述1.1 什么是BOMBOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windows。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。DOMBOM文档对象模型浏览器对象模型把文档当作一个对象看待把浏览器当作一个对象看待DOM顶级对象是documentBOM顶级对象是windowD...
复制链接

扫一扫