JavaScript之BOM构成和常用事件详解

目录
  • 一、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 则没有限制。

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

来操作试试：

 <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(){})来进行上述操作，这里不在赘述。

总结

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

赞 (0)

相关推荐

  • JS浏览器BOM常见操作实例详解

    本文实例讲述了JS浏览器BOM常见操作.分享给大家供大家参考,具体如下: window尺寸 有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8.7.6.5: document.documentElem

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • JS中的BOM应用

    JS中的BOM应用

    我们曾经讲过JS由三部分组成,其中一个部分就是BOM,用于对浏览器进行操作.这节课我们主要就来介绍BOM. BOM基础 我们先来看一个BOM的最基础功能:打开.关闭窗口: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value=&quo

  • JavaScript 浏览器对象模型BOM原理与常见用法实例分析

    JavaScript 浏览器对象模型BOM原理与常见用法实例分析

    本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法.分享给大家供大家参考,具体如下: 什么是BOM BOM:Browser Object Model,浏览器对象模型 从上图也可以看出: window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. DOM是BOM的一部分. window对象: window对象是JavaScript中的顶级对象. 全局变量.自定义函数也是window对象的属性和方法. window对象下的属性和方法

  • JS中BOM相关知识点总结(必看篇)

    JS中BOM相关知识点总结(必看篇)

    window对象 ECMAScript是JavaScript的核心,但是如果要在web中使用javascript,那么BOM(浏览器对象模型)才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象:BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 因此,所有全局作用域中声明的变量.函数都会变成w

  • 深入学习JavaScript中的bom

    BOM(Broswer Object Model) 凡是 window 的属性和方法,均可以省略"window." 方法: 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的w

  • JavaScript之BOM构成和常用事件详解

    JavaScript之BOM构成和常用事件详解

    目录 一.BOM 2.BOM的构成 二.window对象的常用事件 1.窗口加载事件 2.调整窗口大小事件 总结 一.BOM 1.什么是BOM? BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window. BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性. BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览

  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o

  • javascript移动开发中touch触摸事件详解

    javascript移动开发中touch触摸事件详解

    事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现

  • javascript数据代理与事件详解分析

    javascript数据代理与事件详解分析

    目录 数据代理与事件 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 数据代理与事件 星光不负赶路人,满身花香蝶自来 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<

  • C#Button窗体常用属性及事件详解

    1.常用属性 Name:名称: BackColor:设置控件背景颜色: Enabled:是否可用: FlayStyle:控件样式: Image:设置控件图像: ImageAlign:图像对齐方式: ImageList:图像ImageList索引值: Location:坐标: Size:大小: Tabindex:控件顺序索引: Text:文本: TextAlign:文本对齐方式: Visible:控件是否可见: 2.控件事件: Click:单击事件: 知识点扩充: 在真实的C#开发场景中,我们对于

  • JavaScript onblur与onfocus事件详解

            html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像"好123"网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现. 以下的文本框,当鼠标指针移过去时,里面的文字全部被选中: 请输入网址 这是怎么做的呢?看以下代码及解释:

  • JavaScript 中有关数组对象的方法(详解)

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • JavaScript中闭包的写法和作用详解

    1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变

  • JS触发服务器控件的单击事件(详解)

    如下所示: <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#a_doClick").click(function () { $("#<%=btnTest.ClientID%&g

随机推荐