JavaScript中BOM的构成和常用事件有哪些详细解释？

2026-04-05 17:431阅读0评论SEO基础
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计1707个文字，预计阅读时间需要7分钟。

JavaScript中BOM的构成和常用事件有哪些详细解释？

目录

一、BOM

1.BOM的构成

二、window对象常用事件

1.窗口加载事件

2.调整窗口大小事件

总结

一、BOM

1.什么是BOM？

BOM（Browser Object Model，浏览器对象模型）即浏览器对象模型，它提供了一个独立于内容的、可编程的接口，用于与浏览器窗口进行交互。BOM提供了访问浏览器窗口的独立于内容的方法和属性，使得开发者可以控制浏览器的行为。

二、window对象常用事件

1.窗口加载事件

当文档加载完成后，会触发window对象的load事件。

2. 调整窗口大小事件当浏览器窗口大小发生变化时，会触发window对象的resize事件。

目录
  • 一、BOM
  • 2、BOM的构成
  • 二、window对象的常用事件
    • 1、窗口加载事件
    • 2、调整窗口大小事件
  • 总结

    一、BOM

    1、什么是BOM？

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

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

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

    2、BOM的构成

    如下图所示：


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

    它既是 JS 访问浏览器窗口的一个接口。又是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

    在调用的时候可以省略 window，alert()、prompt()等都属于 window 对象方法。

    我们可以调用window对象来看看其有哪些属性和方法。

    如下所示：

    console.log(window);

    截取部分如下所示：


    可见，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

    二、window对象的常用事件

    1、窗口加载事件

    我们知道在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作，如下：

    <body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下！') } </script> </body>

    点击效果为：


    如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。

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

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

    如上例：

    <body> <script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下！') } } </script> <button>点击</button> </body>

    这个时候也可以实现点击效果。


    需要注意的是：

    1.有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

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

    3.如果使用 addEventListener 则没有限制。

    如果此时我们还有一个点击事件，想要将它的操作放到元素前面呢？

    来操作试试：

    JavaScript中BOM的构成和常用事件有哪些详细解释？

    <script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下！') } } window.onload = function(){ alert('你好') } </script> <button>点击</button> </body>

    打印结果如何呢？


    可以发现，第一个事件会被第二个事件覆盖，这是，我们可以另一种方式来操作，如下：

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

    代码为：

    <script> document.addEventListener('DOMContentLoaded',function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下！') } alert('你好呀') }) </script> <button>点击</button> </body>

    运行结果为：


    DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。这种方法Ie9以上才支持，如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

    2、调整窗口大小事件

    在很多网站上，我们会发现，当我们改变窗口大小时，里面的内容也会随之改变，这又是怎样做到的呢？这里就要用到我们的调整窗口大小事件。

    其格式为：

    //（1） window.onresize = function(){} //(2) window.addEventListener("resize",function(){});

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

    举个例子：

    页面中有一个盒子，当我们的页面宽度小于800px时，让这个盒子的颜色变成紫色。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> <script> div = document.querySelector('div') window.onresize = function(){ console.log(window.innerWidth); if(window.innerWidth <= 800){ div.style.backgroundColor = 'green'; } } </script> </body> </html>

    打印结果为：


    同样的我们也可以通过window.addEventListener("resize",function(){})来进行上述操作，这里不在赘述。

    总结

    本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!

    标签：javascript之bom构成和

    相关推荐

    52276PHP7中所有魔术方法有哪些？52278如何为Ubuntu14系统安装PHP7的特定扩展？52288如何通过yum命令为php7.1安装新增扩展模块？52294如何详细步骤编译并安装Ubuntu系统上的PHP7版本？52296PHP7中的协程是如何实现的？能否详细解析其内部机制？52302疫情下PHP中高级面试，哪些技术栈和问题最常被问？52304这个值在数组里能连续出现三次吗？52312如何快速用PHP生成玩转二维码？52316如何巧妙运用PHP函数提取数组中的最大值和次大值？52318如何用PHP正则表达式过滤字符串，提取并返回其中的数字字符？52319如何用PHP字符串函数提取文件扩展名？52327如何编写PHP操作MySQL数据库的常用代码段？52329PHP红包算法的实现思路，你能详细讲解一下吗？52332如何快速制作Word简历，玩转PHP编程技巧？52333PHP中处理JSON的函数有哪些？52337PHP伪协议有哪些具体应用场景？

    本文共计1707个文字，预计阅读时间需要7分钟。

    JavaScript中BOM的构成和常用事件有哪些详细解释？

    目录

    一、BOM

    1.BOM的构成

    二、window对象常用事件

    1.窗口加载事件

    2.调整窗口大小事件

    总结

    一、BOM

    1.什么是BOM？

    BOM（Browser Object Model，浏览器对象模型）即浏览器对象模型，它提供了一个独立于内容的、可编程的接口，用于与浏览器窗口进行交互。BOM提供了访问浏览器窗口的独立于内容的方法和属性，使得开发者可以控制浏览器的行为。

    二、window对象常用事件

    1.窗口加载事件

    当文档加载完成后，会触发window对象的load事件。

    2. 调整窗口大小事件当浏览器窗口大小发生变化时，会触发window对象的resize事件。

    目录
    • 一、BOM
    • 2、BOM的构成
    • 二、window对象的常用事件
      • 1、窗口加载事件
      • 2、调整窗口大小事件
    • 总结

      一、BOM

      1、什么是BOM？

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

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

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

      2、BOM的构成

      如下图所示：


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

      它既是 JS 访问浏览器窗口的一个接口。又是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

      在调用的时候可以省略 window，alert()、prompt()等都属于 window 对象方法。

      我们可以调用window对象来看看其有哪些属性和方法。

      如下所示：

      console.log(window);

      截取部分如下所示：


      可见，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

      二、window对象的常用事件

      1、窗口加载事件

      我们知道在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作，如下：

      <body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下！') } </script> </body>

      点击效果为：


      如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。

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

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

      如上例：

      <body> <script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下！') } } </script> <button>点击</button> </body>

      这个时候也可以实现点击效果。


      需要注意的是：

      1.有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

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

      3.如果使用 addEventListener 则没有限制。

      如果此时我们还有一个点击事件，想要将它的操作放到元素前面呢？

      来操作试试：

      JavaScript中BOM的构成和常用事件有哪些详细解释？

      <script> window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下！') } } window.onload = function(){ alert('你好') } </script> <button>点击</button> </body>

      打印结果如何呢？


      可以发现，第一个事件会被第二个事件覆盖，这是，我们可以另一种方式来操作，如下：

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

      代码为：

      <script> document.addEventListener('DOMContentLoaded',function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下！') } alert('你好呀') }) </script> <button>点击</button> </body>

      运行结果为：


      DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。这种方法Ie9以上才支持，如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

      2、调整窗口大小事件

      在很多网站上，我们会发现，当我们改变窗口大小时，里面的内容也会随之改变，这又是怎样做到的呢？这里就要用到我们的调整窗口大小事件。

      其格式为：

      //（1） window.onresize = function(){} //(2) window.addEventListener("resize",function(){});

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

      举个例子：

      页面中有一个盒子，当我们的页面宽度小于800px时，让这个盒子的颜色变成紫色。

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> <script> div = document.querySelector('div') window.onresize = function(){ console.log(window.innerWidth); if(window.innerWidth <= 800){ div.style.backgroundColor = 'green'; } } </script> </body> </html>

      打印结果为：


      同样的我们也可以通过window.addEventListener("resize",function(){})来进行上述操作，这里不在赘述。

      总结

      本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!