BOM以及window对象常用事件

最新推荐文章于 2023-01-08 00:58:37 发布

清晨投递

最新推荐文章于 2023-01-08 00:58:37 发布

阅读量207

点赞数

分类专栏： javaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122477691

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、什么是BOM？

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

（2）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

（3）BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

二、BOM的构成

BOM比DOM更大，它包含DOM。

三、顶级对象window

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

1、它是 JS 访问浏览器窗口的一个接口。

2、它是一个全局对象。定义在全局作用域中的变量、函数都会变成window 对象的属性和方法。

在调用的时候可以省略 window ，前面学习的对话框都属于 window 对象方法。如 alert（）、prompt（）等。

注意： window 下的一个特殊属性window.name

四、window对象常见事件

页面（窗口）加载事件（2种）

第一种

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

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

第二种

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

（1）DOMContentLoaded 事件触发时，仅当DOM加载完成之后，不包括样式表、图片、flash等等。

（2）IE9以上支持。

（3）如果页面很多图片的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

  <script>
    // (1) onload事件,当页面加载完成才触发
    // 传统方式添加事件：只能有一个onload事件
    window.onload = function () {
      console.log(1);
    }
    // 监听注册方式：能有多个load事件
    window.addEventListener('load', function () {
      console.log(2);
    })
    window.addEventListener('load', function () {
      console.log(2.5);
    })

    // (2) DOMContentLoaded 当DOM结构渲染完成触发
    window.addEventListener('DOMContentLoaded', function () {
      console.log(3);
    })

    // 执行顺序：3 -> 1 -> 2
  </script>

调整窗口大小事件

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

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

注意：

（1）只要窗口发生大小发生像素变化，就会触发这个事件。

（2）经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕宽度

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    // onresize 窗口大小发生变化触发
    window.addEventListener('resize', function () {
      // console.log(0);
      // console.log(window.innerWidth);
      // window.innerWidth 当前屏幕宽度
      // 判断如果屏幕宽度小于500像素,不显示div,否则显示
      if (window.innerWidth < 500) {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    })
  </script>
</body>

清晨投递

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM以及window对象常用事件

目录什么是BOM？BOM的构成顶级对象windowwindow对象常见事件页面（窗口）加载事件（2种）第一种第二种调整窗口大小事件什么是BOM？（1）BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。（2）BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。（3）BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，
复制链接

扫一扫