本课重点学习 BOM 浏览器对象模型与事件监听，是网页实现交互控制的核心内容。学习者需掌握 window、location、history、定时器 等 BOM 功能，实现弹窗、跳转、刷新、计时等浏览器控制。同时掌握标准事件监听方法，为页面元素绑定点击、移入、输入等交互效果。课程衔接第九课 DOM 操作，形成“获取元素→事件触发→BOM/DOM 响应”的完整交互流程。所有网页交互功能均依赖本课知识，是从静态页面走向动态交互的关键一步，为后续表单、全栈开发、项目实战打下重要基础。

一、课程学习目的

  1. 理解 BOM 浏览器对象模型，掌握常用 BOM 对象与核心方法。

  2. 熟练使用 window、location、history、navigator 实现页面控制。

  3. 掌握 DOM 事件监听标准写法，区分 on事件 与 addEventListener。

  4. 能够结合 BOM 与事件实现页面跳转、弹窗、交互控制。

  5. 衔接前序 DOM 操作，完成完整网页交互逻辑开发。

二、核心知识点讲解

1. BOM 基础概念

BOM（Browser Object Model）即浏览器对象模型，用于操作浏览器窗口与功能。

BOM 不属于 JS 语法，而是浏览器提供的 API，所有操作基于 window 对象。

2. 常用 BOM 对象与方法

  • window 对象：浏览器顶级对象，可省略不写。

    • alert() 提示框

    • confirm() 确认框

    • prompt() 输入框

    • setTimeout() 延时器

    • setInterval() 定时器

  • location 对象：控制页面地址。

    • location.href 获取或跳转页面 URL

    • location.reload() 刷新页面

  • history 对象：控制页面历史记录。

    • history.back() 返回上一页

    • history.forward() 前进下一页

  • navigator 对象：获取浏览器/设备信息。

    • navigator.userAgent 浏览器标识

3. 事件监听基础

事件：用户触发的动作（点击、输入、移入、移出、加载等）。

  • 传统事件：元素.onclick = function(){}

  • 标准事件监听：元素.addEventListener('事件类型', 函数)

  • 优势：可绑定多个函数、支持移除事件

4. 常用事件类型

  • click 点击

  • mouseenter 鼠标移入

  • mouseleave 鼠标移出

  • input 输入时触发

  • load 页面加载完成

三、示例程序

示例1：BOM 弹窗与输入框


// 提示框
alert("欢迎进入儿童英语学习系统！");

// 确认框：返回 true / false
let isStart = confirm("是否开始单词测试？");
if (isStart) {
    console.log("用户开始学习");
}

// 输入框：获取用户输入内容
let userName = prompt("请输入你的昵称：");
console.log("欢迎你：" + userName);

示例说明：本示例展示 BOM 最常用三种弹窗，分别用于提示、确认、输入。alert 仅提示，confirm 可获取用户是否确认，prompt 可收集用户输入。常用于页面引导、操作确认、简单数据收集，是浏览器交互基础功能。

示例2：location 地址栏操作


// 获取当前页面地址
console.log(location.href);

// 点击按钮跳转到新页面
let jumpBtn = document.getElementById("jumpBtn");
jumpBtn.onclick = function () {
    // 跳转到指定网址
    location.href = "https://www.baidu.com";
};

// 刷新页面
let refreshBtn = document.getElementById("refreshBtn");
refreshBtn.addEventListener("click", function () {
    location.reload();
});

示例说明：本示例演示 location 对象控制页面地址，可获取当前 URL、跳转网页、刷新页面。是网页开发中最常用 BOM 功能，常用于点击跳转、登录后跳转、自动刷新等场景。

示例3：定时器与延时器（BOM）


// 延时器：1秒后执行一次
setTimeout(function () {
    console.log("1秒后输出学习提示");
}, 1000);

// 定时器：每隔1秒执行一次
let timer = setInterval(function () {
    console.log("单词学习计时中...");
}, 1000);

// 停止定时器
let stopBtn = document.getElementById("stopBtn");
stopBtn.onclick = function () {
    clearInterval(timer);
};

示例说明：本示例展示 BOM 定时器与延时器，setTimeout 延迟执行一次，setInterval 循环执行。常用于倒计时、自动轮播、定时保存、学习计时等功能。必须掌握 clearInterval 停止定时器，避免内存浪费。

示例4：事件监听 addEventListener


let wordBox = document.getElementById("wordBox");

// 绑定点击事件
wordBox.addEventListener("click", function () {
    alert("你点击了单词区域");
});

// 绑定鼠标移入事件
wordBox.addEventListener("mouseenter", function () {
    wordBox.style.backgroundColor = "#f0f0f0";
});

// 绑定鼠标移出事件
wordBox.addEventListener("mouseleave", function () {
    wordBox.style.backgroundColor = "white";
});

示例说明：本示例使用标准事件监听，为元素绑定多个交互效果。addEventListener 可同时绑定点击、移入、移出，不互相覆盖。是企业开发标准写法，支持动态绑定、解绑，功能比传统 on事件 更强大。

示例5：history 与浏览器控制


// 返回上一页
let backBtn = document.getElementById("backBtn");
backBtn.onclick = function () {
    history.back();
};

// 前进下一页
let forwardBtn = document.getElementById("forwardBtn");
forwardBtn.onclick = function () {
    history.forward();
};

示例说明：本示例使用 history 对象控制浏览器前进后退，实现页面导航功能。常用于自定义返回按钮、页面导航组件，无需手动记录地址，由浏览器历史记录自动管理。

四、掌握技巧与方法

  1. BOM 操作浏览器，DOM 操作页面内容，二者配合实现完整交互。

  2. window 是顶级对象，调用方法时可省略不写。

  3. 定时器必须记得清除，防止页面卡顿或内存泄漏。

  4. 优先使用 addEventListener 绑定事件，兼容性强、功能完整。

  5. 事件与 DOM、BOM 结合使用，实现点击跳转、弹窗、计时等功能。

五、课后作业

基础作业

  1. 使用 alert、confirm、prompt 各写一个示例，运行并观察效果。

  2. 使用 location.href 实现点击按钮跳转到指定网页。

进阶作业

  1. 编写一个 10 秒倒计时定时器，到时间后自动停止并提示。

  2. 给一个盒子绑定 click、mouseenter、mouseleave 三个事件。

实战作业

  1. 英语学习工具综合交互：

    • 点击开始按钮弹出确认框，确认后显示单词。

    • 点击跳转按钮打开学习页面。

    • 设置 5 秒自动提示弹窗。

    • 鼠标移入单词高亮显示。

六、上一课作业答案


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>儿童英语单词判断小程序</title>
</head>
<body>
    <h2 id="title">儿童英语单词小测试</h2>
    <button id="checkBtn">点击开始判题</button>
    <div id="resultBox" style="margin-top:20px; font-size:18px;"></div>

    <script>
        // ===================== 第6课 数组数据 =====================
        // 正确单词数组
        let correctWords = ["apple", "banana", "dog", "cat", "orange"];
        // 用户答案数组
        let userAnswers = ["apple", "banana", "dog", "cat", "orange"];

        // ===================== 第7课 DOM 获取元素 =====================
        let checkBtn = document.getElementById("checkBtn");
        let resultBox = document.getElementById("resultBox");
        let title = document.getElementById("title");

        // ===================== 判题函数（循环 + 数组） =====================
        function checkWordTest() {
            let correctCount = 0;
            let resultHTML = "";

            // 循环遍历所有单词
            for (let i = 0; i < correctWords.length; i++) {
                if (userAnswers[i] === correctWords[i]) {
                    // 答对：绿色文字
                    resultHTML += `<p style="color:green">第${i+1}题：答对 ✅</p>`;
                    correctCount++;
                } else {
                    // 答错：红色文字
                    resultHTML += `<p style="color:red">第${i+1}题：答错 ❌</p>`;
                }
            }

            // 拼接总分
            resultHTML += `<hr><strong>总题数：${correctWords.length} 题</strong><br>`;
            resultHTML += `<strong>答对：${correctCount} 题</strong>`;

            // ===================== DOM 渲染到页面 =====================
            resultBox.innerHTML = resultHTML;

            // 修改标题样式
            title.style.color = "#2c3e50";
            title.style.fontFamily = "Arial";

            // 修改按钮样式
            checkBtn.style.backgroundColor = "#007bff";
            checkBtn.style.color = "white";
            checkBtn.style.padding = "6px 12px";
        }

        // ===================== 点击事件触发 =====================
        checkBtn.onclick = function () {
            checkWordTest();
        };
    </script>
</body>
</html>

代码注释说明（逐功能注释）

1. 数组部分（第八课知识）

  • correctWords：正确单词题库

  • userAnswers：儿童输入的答案

  • 两个数组一一对应

2. DOM 获取元素（第九课核心）

  • getElementById：通过 id 获取页面元素

  • 先获取，再操作，是 DOM 的固定流程

3. 判题函数（循环 + 数组 + 条件判断）

  • 用 for 循环遍历所有题目

  • 判断答案是否正确

  • 统计答对数量

4. DOM 修改内容

  • innerHTML：把结果渲染到页面

  • 支持 HTML 标签（<p>、<hr>、<br>）

5. DOM 修改样式

  • 元素.style.属性 修改行内样式

  • 使用小驼峰命名：backgroundColor、fontFamily

6. DOM 点击事件

  • 按钮.onclick = 函数

  • 点击按钮才开始判题，实现交互

实战作业功能说明

  1. 点击按钮判题（交互事件）

  2. 答对绿色、答错红色（DOM 样式修改）

  3. 结果显示在页面上（innerHTML 渲染）

  4. 统计总分（数组 + 循环）

  5. 修改标题、按钮样式（DOM 样式操作）

  6. 可直接在浏览器打开运行

Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

【毕业设计】SpringBoot+Vue+MySQL 房屋租赁系统平台源码+数据库+论文+部署文档

avatar AtomGit开源社区
cover

基于SpringBoot+Vue的旅游网站管理系统设计与实现【Java+MySQL+MyBatis完整源码】

avatar AtomGit开源社区
cover

SpringBoot+Vue 大学生入学审核系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

avatar AtomGit开源社区