本课重点学习 BOM 浏览器对象模型与事件监听，是网页实现交互控制的核心内容。学习者需掌握window、location、history、定时器等 BOM 功能，实现弹窗、跳转、刷新、计时等浏览器控制。同时掌握标准事件监听方法，为页面元素绑定点击、移入、输入等交互效果。课程衔接第7课 DOM 操作，形成“获取元素→事件触发→BOM/DOM 响应”的完整交互流程。所有网页交互功能均依赖本课知识，是从静态页面走向动态交互的关键一步，为后续表单、全栈开发、项目实战打下重要基础。
一、课程学习目的
理解 BOM 浏览器对象模型，掌握常用 BOM 对象与核心方法。
熟练使用
window、location、history、navigator实现页面控制。掌握 DOM 事件监听标准写法，区分
on事件与addEventListener。能够结合 BOM 与事件实现页面跳转、弹窗、交互控制。
衔接前序 DOM 操作，完成完整网页交互逻辑开发。
二、核心知识点讲解
1. BOM 基础概念
BOM（Browser Object Model）即浏览器对象模型，用于操作浏览器窗口与功能。
BOM 不属于 JS 语法，而是浏览器提供的 API，所有操作基于window对象。
2. 常用 BOM 对象与方法
window 对象：浏览器顶级对象，可省略不写。
alert()提示框confirm()确认框prompt()输入框setTimeout()延时器setInterval()定时器
location 对象：控制页面地址。
location.href获取或跳转页面 URLlocation.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对象控制浏览器前进后退，实现页面导航功能。常用于自定义返回按钮、页面导航组件，无需手动记录地址，由浏览器历史记录自动管理。
四、掌握技巧与方法
BOM 操作浏览器，DOM 操作页面内容，二者配合实现完整交互。
window是顶级对象，调用方法时可省略不写。定时器必须记得清除，防止页面卡顿或内存泄漏。
优先使用
addEventListener绑定事件，兼容性强、功能完整。事件与 DOM、BOM 结合使用，实现点击跳转、弹窗、计时等功能。
五、课后作业
基础作业
使用
alert、confirm、prompt各写一个示例，运行并观察效果。使用
location.href实现点击按钮跳转到指定网页。
进阶作业
编写一个 10 秒倒计时定时器，到时间后自动停止并提示。
给一个盒子绑定
click、mouseenter、mouseleave三个事件。
实战作业
英语学习工具综合交互：
点击开始按钮弹出确认框，确认后显示单词。
点击跳转按钮打开学习页面。
设置 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 = 函数点击按钮才开始判题，实现交互
实战作业功能说明
点击按钮判题（交互事件）
答对绿色、答错红色（DOM 样式修改）
结果显示在页面上（innerHTML 渲染）
统计总分（数组 + 循环）
修改标题、按钮样式（DOM 样式操作）
可直接在浏览器打开运行
