JavaScript基础课程十、JavaScript BOM 基础与事件监听

本课重点学习 BOM 浏览器对象模型与事件监听是网页实现交互控制的核心内容。学习者需掌握window、location、history、定时器等 BOM 功能实现弹窗、跳转、刷新、计时等浏览器控制。同时掌握标准事件监听方法为页面元素绑定点击、移入、输入等交互效果。课程衔接第7课 DOM 操作形成“获取元素→事件触发→BOM/DOM 响应”的完整交互流程。所有网页交互功能均依赖本课知识是从静态页面走向动态交互的关键一步为后续表单、全栈开发、项目实战打下重要基础。一、课程学习目的理解 BOM 浏览器对象模型掌握常用 BOM 对象与核心方法。熟练使用window、location、history、navigator实现页面控制。掌握 DOM 事件监听标准写法区分on事件与addEventListener。能够结合 BOM 与事件实现页面跳转、弹窗、交互控制。衔接前序 DOM 操作完成完整网页交互逻辑开发。二、核心知识点讲解1. BOM 基础概念BOMBrowser 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页面加载完成三、示例程序示例1BOM 弹窗与输入框// 提示框 alert(欢迎进入儿童英语学习系统); // 确认框返回 true / false let isStart confirm(是否开始单词测试); if (isStart) { console.log(用户开始学习); } // 输入框获取用户输入内容 let userName prompt(请输入你的昵称); console.log(欢迎你 userName);示例说明本示例展示 BOM 最常用三种弹窗分别用于提示、确认、输入。alert仅提示confirm可获取用户是否确认prompt可收集用户输入。常用于页面引导、操作确认、简单数据收集是浏览器交互基础功能。示例2location 地址栏操作// 获取当前页面地址 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事件监听 addEventListenerlet 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事件更强大。示例5history 与浏览器控制// 返回上一页 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 langzh-CN head meta charsetUTF-8 title儿童英语单词判断小程序/title /head body h2 idtitle儿童英语单词小测试/h2 button idcheckBtn点击开始判题/button div idresultBox stylemargin-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 stylecolor:green第${i1}题答对 ✅/p; correctCount; } else { // 答错红色文字 resultHTML p stylecolor:red第${i1}题答错 ❌/p; } } // 拼接总分 resultHTML hrstrong总题数${correctWords.length} 题/strongbr; 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、br5. DOM 修改样式元素.style.属性修改行内样式使用小驼峰命名backgroundColor、fontFamily6. DOM 点击事件按钮.onclick 函数点击按钮才开始判题实现交互实战作业功能说明点击按钮判题交互事件答对绿色、答错红色DOM 样式修改结果显示在页面上innerHTML 渲染统计总分数组 循环修改标题、按钮样式DOM 样式操作可直接在浏览器打开运行