码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-BOM

2025/6/28 0:24:31

前端基础JavaScript基础BOM课程前言Course...

前端基础JavaScript基础BOM

课程前言Course Introduction同学们，本课程聚焦 JavaScript 核心进阶内容，详解常用键盘事件（含 keydown 等三大事件及 keyCode 应用）、浏览器对象模型（BOM）架构（window 对象、加载事件、定时器等），以及 JS 单线程执行机制，助你掌握网页交互开发关键技术。让我们开始今天的课程吧！一常用键盘事件详解

CodingFuture

1.1键盘事件基础

键盘事件是网页交互中重要的用户输入方式，JavaScript 提供了三种核心键盘事件，它们的触发时机和特性各有不同：1.1.1三大键盘事件对比事件类型触发时机功能键识别能力大小写敏感性onkeydown按键按下瞬间触发支持（如 Ctrl、箭头）不区分大小写onkeypress按键按下并产生字符时触发不支持（功能键无效）区分大小写（A/a 不同）onkeyup按键松开时触发支持（如 Ctrl、箭头）不区分大小写代码示例：三种事件的基本用法// 方法1：传统事件绑定document.onkeydown = function() {  console.log("keydown触发");};// 方法2：事件监听（推荐，可绑定多个事件）document.addEventListener("keypress", function() {  console.log("keypress触发");});document.addEventListener("keyup", function() {  console.log("keyup触发");});1.1.2 键盘事件对象与 keyCode 属性键盘事件对象提供了 keyCode 属性，用于获取按键对应的 ASCII 码值，是识别用户输入的关键：document.addEventListener("keyup", function(e) {  console.log("按键码：", e.keyCode);    // 示例：判断用户是否按下 A 键（keyCode 65，不区分大小写）  if (e.keyCode === 65) {    console.log("用户按下了 A 或 a 键");  }});// keypress 事件区分大小写（a:97，A:65）document.addEventListener("keypress", function(e) {  if (e.keyCode === 65) {    console.log("用户按下了 A 键");  }  if (e.keyCode === 97) {    console.log("用户按下了 a 键");  }});1.1.3 实战案例：模拟京东搜索框按键定位需求： 当用户按下 S 键时，自动将光标定位到搜索框。<input type="text" id="searchInput"><script>const searchInput = document.getElementById("searchInput");  document.addEventListener("keyup", function(e) {// S 键的 keyCode 为 83（不区分大小写）if (e.keyCode === 83) {      searchInput.focus(); // 元素获取焦点      searchInput.value = ""; // 可选：清空输入框    }  });</script>focus() 方法使输入框获得焦点keyup 事件在按键松开时触发，避免连续触发实际开发中可结合 keydown 事件实现更灵敏的响应二浏览器对象模型（BOM）深度解析

CodingFuture

2.1BOM 基础概念

2.1.1 什么是 BOMBOM（Browser Object Model）即浏览器对象模型，是 JavaScript 操作浏览器窗口的接口，核心对象是 window。它与 DOM 的区别如下：DOM（文档对象模型）BOM（浏览器对象模型）操作页面文档结构操作浏览器窗口功能顶层对象是 document顶层对象是 windowW3C 标准化规范浏览器厂商自定义，兼容性差2.1.2 BOM 的核心构成BOM 包含以下主要对象：window：浏览器窗口的顶级对象document：DOM 顶层对象（BOM 包含 DOM）location：URL 操作对象navigation：浏览器导航历史screen：屏幕信息history：浏览器历史记录2.2window 对象详解

2.2.1 window 对象的特性顶级对象身份：所有全局变量、函数默认都是 window 的属性浏览器接口：提供对话框（alert/prompt/confirm）、定时器等功能全局作用域：window.变量名 与 变量名 等价代码示例：window 对象的使用// 显式调用 window 属性window.console.log("码上未来");window.alert("Hello BOM");// 隐式调用（等价于 window 调用）var age = 23;console.log(age); // 等价于 window.age2.2.2 window 常用事件窗口 / 页面加载事件第 1 种：window.onload触发时机：页面所有资源（HTML、CSS、JS、图片等）加载完成后语法：window.onload = function() {}; // 传统方式window.addEventListener("load", function() {}); // 事件监听方式注意：可在 HTML 头部编写 JS 代码，因 onload 会等待所有资源加载第 2 种：DOMContentLoaded触发时机：仅当 DOM 结构加载完成，不等待 CSS/JS/ 图片语法：document.addEventListener("DOMContentLoaded", function() {});优势：资源较多时响应更快，适合首屏交互对比示例：<button id="btn">点击我</button><script>// window.onload 等待所有资源  window.onload = function() {    document.getElementById("btn").onclick = function() {      alert("onload 绑定");    };  };// DOMContentLoaded 仅等 DOM 结构  document.addEventListener("DOMContentLoaded", function() {    document.getElementById("btn").onclick = function() {      alert("DOMContentLoaded 绑定");    };  });</script>窗口大小调整事件事件名：window.onresize触发时机：窗口宽度或高度发生变化时应用场景：响应式布局、动态调整元素尺寸代码示例：响应式布局实现<div id="adaptDiv"></div><script>  const div = document.getElementById("adaptDiv");    window.addEventListener("resize", function() {    const screenWidth = window.innerWidth; // 获取当前屏幕宽度        if (screenWidth > 1000) {      div.style.width = "800px";      div.style.backgroundColor = "blue";    } else {      div.style.width = "600px";      div.style.backgroundColor = "green";    }  });</script>2.3定时器机制与实战

2.3.1 setTimeout：单次执行定时器（炸弹定时器）功能：延迟指定时间后执行一次函数语法：setTimeout(回调函数, 延迟毫秒数)返回值：定时器标识符（用于停止定时器）代码示例：三种调用方式// 1. 匿名函数方式（推荐）setTimeout(function() {  alert("2秒后爆炸！");}, 2000);// 2. 命名函数方式function explode(){  alert("命名函数爆炸！");}setTimeout(explode, 3000);// 3. 字符串方式（不推荐，性能差）setTimeout("explode(5)", 4000);function explode(sec){  alert(`${sec}秒后爆炸！`);}2.3.2 停止定时器：clearTimeout语法：clearTimeout(定时器标识符)注意：必须保存 setTimeout 的返回值才能正确停止实战案例：3 秒后关闭广告<img src="ad.jpg" class="ad" alt="广告图"><script>const adImg = document.querySelector(".ad");// 保存定时器标识符const timerId = setTimeout(function() {    adImg.style.display = "none"; // 隐藏广告图  }, 3000);// 提供提前关闭按钮（可选）  document.addEventListener("click", function() {    clearTimeout(timerId); // 点击页面任意位置取消定时器  });</script>2.3.3 setInterval：循环执行定时器（闹钟定时器）功能：按指定间隔重复执行函数语法：setInterval(回调函数, 间隔毫秒数)应用场景：倒计时、轮播图、实时数据刷新代码示例：每秒打印一次信息// 开启定时器const intervalId = setInterval(function() {const now = new Date();  console.log(`当前时间：${now.toLocaleTimeString()}`);}, 1000);// 10秒后停止定时器setTimeout(function() {  clearInterval(intervalId);  console.log("定时器已停止");}, 10000);2.3.4 定时器叠加问题与解决方案问题现象： 多次点击开启按钮会导致定时器叠加，无法正确停止。解决方案：使用布尔值标记定时器状态<button class="start">开启定时器</button><button class="stop">停止定时器</button><script>  let timerId = null;  let isRunning = false; // 标记定时器是否运行const startBtn = document.querySelector(".start");const stopBtn = document.querySelector(".stop");  startBtn.onclick = function() {if (!isRunning) {      isRunning = true;      timerId = setInterval(function() {        console.log("定时器工作中...");      }, 1000);    }  };  stopBtn.onclick = function() {if (isRunning) {      isRunning = false;      clearInterval(timerId);      console.log("定时器已停止");    }  };</script>2.3.5 实战案例：短信倒计时功能需求： 点击发送按钮后，按钮变为倒计时状态，60 秒内不可重复点击。手机号码：<input type="number" id="phone"><button id="sendBtn">发送验证码</button><script>  const sendBtn = document.getElementById("sendBtn");  let countdown = 60; // 倒计时秒数    sendBtn.onclick = function() {    // 禁用按钮    this.disabled = true;    this.innerText = `剩余 ${countdown} 秒`;        const timerId = setInterval(() => {      countdown--;            if (countdown <= 0) {        // 倒计时结束        this.innerText = "发送验证码";        this.disabled = false;        clearInterval(timerId);        countdown = 60; // 重置倒计时      } else {        this.innerText = `剩余 ${countdown} 秒`;      }    }, 1000);  };</script>2.4 this 指向深入理解

this 的指向在函数执行时确定，遵循以下规则：1.全局环境 / 普通函数：指向 windowfunction fn(){  console.log(this); // window}fn();2.对象方法调用：指向调用者对象const person = {  name: "张三",  sayHi() {    console.log(this.name); // 张三  }};person.sayHi();3.事件处理函数：指向事件源元素button.onclick = function() {this.style.backgroundColor = "red"; // 点击的按钮变红色};4.定时器函数：指向 windowsetInterval(function() {  console.log(this); // window}, 1000);5.构造函数：指向新创建的实例function Person(name){  this.name = name;}const p = new Person("李四");console.log(p.name); // 李四2.5location 对象与 URL 操作

2.5.1 URL 结构解析URL（统一资源定位符）的标准结构：协议://主机:端口/路径?参数1=值1&参数2=值2#锚点示例：http://localhost:8080/path/to/page?name=张三&age=18#section12.5.2 location 对象常用属性属性名示例值（以 http://a.com:8080/path?k=v#锚点 为例）location.href完整 URL：http://a.com:8080/path?k=v#锚点location.search参数部分：?k=vlocation.pathname路径：/pathlocation.host主机 + 端口：a.com:8080location.port端口：80802.5.3 实战案例：自动跳转页面需求： 5 秒后自动跳转到首页，同时提供 “立即跳转” 按钮。<button id="jumpNow">立即跳转</button><div id="countdown">5秒后返回首页</div><script>  const jumpBtn = document.getElementById("jumpNow");  const countdownDiv = document.getElementById("countdown");  let seconds = 5;    // 立即跳转功能  jumpBtn.onclick = function() {    location.href = "http://www.baidu.com"; // 跳转到百度  };    // 定时跳转功能  const timerId = setInterval(function() {    seconds--;    countdownDiv.innerText = `${seconds}秒后返回首页`;        if (seconds <= 0) {      location.href = "http://www.baidu.com";      clearInterval(timerId);    }  }, 1000);</script>三JavaScript 执行机制揭秘

CodingFuture

3.1JS 单线程特性

JavaScript 是单线程语言，意味着：同一时间只能执行一个任务所有任务按顺序排队执行长时间任务会阻塞页面渲染影响：避免在主线程中执行耗时操作（如大循环、复杂计算）耗时任务需通过异步处理（如定时器、AJAX）3.2同步任务与异步任务

3.2.1 同步任务定义：在主线程上按顺序执行的任务特点：前一个任务完成后才执行下一个示例：console.log(1); // 同步任务1console.log(2); // 同步任务23.2.2 异步任务定义：不进入主线程，放入 “任务队列” 的任务特点：主线程空闲时才执行类型：定时器事件（setTimeout/setInterval）事件监听（点击、滚动等）资源加载（图片、AJAX 请求等）代码示例：同步与异步对比console.log(1); // 同步任务1// 异步任务：2秒后执行setTimeout(function() {  console.log(3); // 异步任务回调}, 2000);console.log(2); // 同步任务2// 输出顺序：1 → 2 → 3（2秒后）3.3事件循环（Event Loop）机制

3.3.1 核心概念执行栈：主线程中正在执行的任务队列任务队列：存放异步任务的回调函数事件循环：主线程不断从任务队列中提取异步任务执行3.3.2 执行流程先执行执行栈中的所有同步任务异步任务产生时，将回调函数放入任务队列同步任务执行完毕后，从任务队列中按顺序提取异步任务放入执行栈执行重复步骤 3，形成 “事件循环”3.3.3 案例解析：异步任务执行顺序案例 1：console.log(1);setTimeout(function() {  console.log(3);}, 0); // 延迟0毫秒（立即进入任务队列）console.log(2);// 输出顺序：1 → 2 → 3// 解析：setTimeout 是异步任务，进入任务队列，主线程先执行完同步任务1和2案例2：console.log(1);setTimeout(function() {  console.log(3);}, 0);// 模拟耗时的同步任务for (let i = 0; i < 10000; i++) {  console.log(2);}// 输出顺序：1 → 2（10000次）→ 3// 解析：for循环是同步任务，阻塞主线程，任务队列中的定时器回调需等待其完成3.4异步编程的重要性

避免页面卡顿：耗时任务（如网络请求、大文件处理）不阻塞主线程优化用户体验：界面交互与后台任务可并行处理典型应用：图片懒加载无限滚动加载实时数据推送（WebSocket）

结言陈词Closing statement同学们，今天的课程系统讲解键盘事件交互逻辑、BOM 各对象操作（如 window 事件、location 跳转）与定时器实战，剖析 JS 同步 / 异步任务执行原理。掌握这些知识可提升网页交互开发能力，优化用户体验与代码执行效率。下期课程预告：JavaScript基础-ES6码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部