BOM、window对象常见事件

最新推荐文章于 2022-03-25 18:50:15 发布

原创最新推荐文章于 2022-03-25 18:50:15 发布 · 353 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

web学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了浏览器对象模型（BOM）的核心对象window及其与DOM的区别。BOM允许开发者与浏览器窗口交互，而DOM是文档对象模型，用于处理文档结构。文章详细讲解了window对象的常用事件如onload和onresize，以及定时器方法setTimeout和setInterval。同时，通过示例展示了如何使用这些事件和方法实现特定功能，如图片延迟隐藏和发送短信的倒计时限制。

BOM

BOM：浏览器对象模型（Brower Object Model ,
BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM的构成

在这里插入图片描述

BOM和DOM的区别

DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。（实际上是window.document）

window对象的常见事件

窗口加载对象

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

//实现方式
window.onload = function(){ }    //方式一
window.addEventListener('load',function(){ } )    //方式二，此处的onload不可以加on

document.DOMContentLoaded：此加载事件会在DOM加载完成时触发，这里所说的加载不包括css样式表，图片和flash动画等额外内容的加载。

调整窗口大小事件

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

//实现方式
window.onresize = function(){}  //方式一      
window.addEventListener('resize',function(){})  //方式二

定时器对象

定时器方法如下

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

举例：在3s后清除图片
点击运行显示图片，在3s之后图片隐藏

<body>
    <img src="../img/5.jpg">  <!--插入图片-->
    <script>
        function fun(){
            var img = document.querySelector('img')  //获取标签
            img.style.display = 'none'   //设置img图片样式为隐藏
            //在js中设置样式需要先找到标签的style属性
        }

        var timer = setTimeout(fun,3000)  //设置定时器函数在3000毫秒之后执行函数
        // clearTimeout(timer)
    </script>
</body>

举例：60s内只能发送一次短信
思路：在页面中放入一个文本框和“发送”按钮；在文本框中输入手机号码等内容后，点击“发送”按钮即发送短信；在点击按钮之后按钮上文字变为“还剩下多少秒”，当秒数为0时可再次点击。

<body>
    手机号码：
        <input type="number">
        <button>发送</button>
    <script>
        //1、选中按钮
        var btn = document.querySelector('button')   //使用的是标签名选择器
        //2、定义倒计时的时间
        var time = 60
        //3、给按钮注册事件监听程序
        btn.addEventListener('click',function(){   //监听的是click点击事件
            //3.1 设置按钮状态
            btn.disabled = true   //表示点击按钮后按钮就不可用
            //3.2 创建一个定时器
            var timer = setInterval(function(){
                if(time == 0){    //表示倒计时结束
                    clearInterval(timer)    //清除定时器
                    btn.disabled = false    //作用是使按钮可用
                    btn.innerHTML = '发送'   //修改按钮上的文字
                }else{   //倒计时未结束情况
                    btn.innerHTML = '还剩下'+time+'秒'   //设置按钮上显示的文字
                    time--
                }
            },1000);    //在1秒后执行上述函数
        })
    </script>
</body>