19.BOM浏览器对象模型

目录

一、什么是BOM

二、window对象常见的事件

1. window.onload 窗口加载事件

2. DOMContentLoaded

3. window.onresize

4.  定时器window.setTimeout(调用函数,延迟的时间)

5. window.clearTimeout(定时器的名字) 停止定时器

6. window.setInterval(回调函数,延迟时间) 重复调用这个函数

7.  window.clearInterval(定时器的名字) 停止定时器


一、什么是BOM

BOM是浏览器对象模型:提供了独立于内容而与浏览器窗口进行交互的对象,核心是window

BOM是由一系列相关的对象构成,并且每个对象都提供了很多方法和属性

window对象是浏览器的顶级对象,有双重角色

1、它是js访问浏览器窗口的接口

2、它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。在调用的时候可以省略window。如:alert、prompt等


二、window对象常见的事件

1. window.onload 窗口加载事件

当文档内容完全加载完成后触发该事件(包括图像、脚本文件、css文件等),就调用的处理函数

注意:

  • 有了window.onload就可以把js代码写到元素的上方,因为onload是等页面内容全部加载完毕才执行

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

  • 如果使用addEventListener则没有限制

       window.addEventListener('load', function() {

           alert(11);

       });

2. DOMContentLoaded

是DOM加载完毕,不包括图片,flash、css等就可以执行,加载速度比load更快一些

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

           alert(22);

       });

3. window.onresize

调整窗口大小事件,当触发时就调用的处理函数

   var div = document.querySelector('div');

        window.addEventListener('resize', function() {

            console.log(window.innerWidth); // 获取当前屏幕的宽度

            if (window.innerWidth <= 800) {

                div.style.display = 'none';

            } else {

                div.style.display = 'block';

            }

        })

4.  定时器window.setTimeout(调用函数,延迟的时间)

  • 1、window可以省略

  • 2、延迟的时间是毫秒数,可以省略,默认是0

  • 3、调用函数可以写在外面,里面写函数名即可

  • 4、一个也页面中定时器会有很多,所以经常会给定时器赋值一个标识符(名字)

   // setTimeout(function() {

        //     console.log('2秒后爆炸');

        // }, 2000)

        function callback() {

            console.log('爆炸');

        }

        var time1 = setTimeout(callback, 2000);

        var time2 = setTimeout(callback, 5000);

5. window.clearTimeout(定时器的名字) 停止定时器

   var btn = document.querySelector('button');

        var timer = setTimeout(function() {

            console.log("5 秒后爆炸");

        }, 5000)

        btn.addEventListener('click', function() {

            clearTimeout(timer);

        })

6. window.setInterval(回调函数,延迟时间) 重复调用这个函数

        var timer = setInterval(function() {

            console.log("我会被重复调用输出");

        }, 1000)

7.  window.clearInterval(定时器的名字) 停止定时器

var begin = document.querySelector('.begin');

        var end = document.querySelector('.end');

        var timer = null; // 定义一个全部变量,赋值为null,因为null是一个空对象

        begin.addEventListener('click', function() {

            timer = setInterval(function() {

                console.log(11);

            }, 1000)

        })

        end.addEventListener('click', function() {

            clearInterval(timer);

        })

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_LiuP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值