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

BOM的构成

BOM全称Browser Object Model，它是浏览器提供的一组对象和方法，用于操作浏览器窗口、浏览器预览框、浏览器历史记录和浏览器状态信息等。

BOM由以下几个对象构成：

• Window对象
• History对象
• Location对象
• Navigator对象

Window对象

Window对象是BOM中最为重要的对象，它代表了一个窗口中的文档。

Window对象的常用属性和方法有：

• alert()：弹出对话框
• confirm()：弹出确认对话框
• prompt()：弹出提示框
• setTimeout()：延时执行一个函数
• setInterval()：定时执行一个函数
• innerWidth：窗口的内部宽度
• innerHeight：窗口的内部高度
• outerWidth：窗口的外部宽度
• outerHeight：窗口的外部高度
• document：代表文档对象

其中最常用的就是document属性，它代表了当前窗口中显示的HTML文档对象。我们可以通过它来获取或修改页面中的元素和内容。

History对象

History对象是用来操作浏览器历史记录的对象，它提供了以下几个常用的方法：

• back()：后退到上一个页面
• forward()：前进到下一个页面
• go(num)：跳转到相对于当前页的第num个页面（num为正数则前进，负数则后退）

Location对象

Location对象是用来操作浏览器地址栏的对象，它提供了以下几个常用的属性和方法：

• href：获取或设置当前页面的URL
• origin：获取或设置当前页面的origin
• hash：获取或设置URL中的锚点（#后面的部分）
• replace(url)：用指定的URL替换当前页面

Navigator对象

Navigator对象是用来获取一些浏览器相关的信息，例如用户代理字符串和浏览器版本等。

JavaScript常用事件

在JavaScript中，事件是指与HTML元素相关联的动作，例如点击、鼠标移动、键盘输入等。我们可以通过事件来触发JavaScript代码的执行。下面介绍一些常用的事件：

click事件

click事件是指当一个元素被点击时触发，例如：

<button onclick="alert('你点击了按钮')">点我</button>

mouseover和mouseout事件

mouseover事件是指当鼠标移动到一个元素上时触发，mouseout事件是指当鼠标从一个元素上移开时触发。

<div onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">鼠标移动到我上面</div>

keyup和keydown事件

keyup事件是指当键盘上的一个键被松开时触发，keydown事件是指当前键盘上的一个键被按下时触发。

<input type="text" onkeyup="console.log('你松开了键盘上的一个键')" onkeydown="console.log('你按下了键盘上的一个键')">

示例说明

示例一

下面是一个简单的例子，当用户点击一个按钮时，改变某个元素的背景颜色：

<button onclick="document.getElementById('myDiv').style.backgroundColor='red'">改变颜色</button>
<div id="myDiv"></div>

点击按钮后，文档中的myDiv元素的背景颜色将变为红色。

示例二

下面是一个示例，当鼠标移动到某个元素上时，通过JavaScript代码在控制台输出一些信息：

<div onmouseover="console.log('你的鼠标移动到我上面了')" onmouseout="console.log('你的鼠标从我上面移开了')">鼠标移动到我上面</div>

当鼠标移动到这个div元素上时，在浏览器的控制台中会输出一条信息，当鼠标离开这个元素时，又会输出一条信息。