各細(xì)分領(lǐng)域的資深老師、教練和從業(yè)者入駐教育寶大咖平臺(tái)
磨礪教育初心,碼上成就未來(lái)
碼上未來(lái)IT培訓(xùn)老師直接接聽(tīng)
2025/6/28 0:24:31
前端基礎(chǔ)JavaScript基礎(chǔ)BOM課程前言Course...
前端基礎(chǔ)JavaScript基礎(chǔ)BOM
課程前言Course Introduction同學(xué)們,本課程聚焦 JavaScript 核心進(jìn)階內(nèi)容,詳解常用鍵盤(pán)事件(含 keydown 等三大事件及 keyCode 應(yīng)用)、瀏覽器對(duì)象模型(BOM)架構(gòu)(window 對(duì)象、加載事件、定時(shí)器等),以及 JS 單線程執(zhí)行機(jī)制,助你掌握網(wǎng)頁(yè)交互開(kāi)發(fā)關(guān)鍵技術(shù)。讓我們開(kāi)始今天的課程吧!一常用鍵盤(pán)事件詳解
CodingFuture
1.1鍵盤(pán)事件基礎(chǔ)
鍵盤(pán)事件是網(wǎng)頁(yè)交互中重要的用戶輸入方式,JavaScript 提供了三種核心鍵盤(pán)事件,它們的觸發(fā)時(shí)機(jī)和特性各有不同:1.1.1三大鍵盤(pán)事件對(duì)比事件類型觸發(fā)時(shí)機(jī)功能鍵識(shí)別能力大小寫(xiě)敏感性onkeydown按鍵按下瞬間觸發(fā)支持(如 Ctrl、箭頭)不區(qū)分大小寫(xiě)onkeypress按鍵按下并產(chǎn)生字符時(shí)觸發(fā)不支持(功能鍵無(wú)效)區(qū)分大小寫(xiě)(A/a 不同)onkeyup按鍵松開(kāi)時(shí)觸發(fā)支持(如 Ctrl、箭頭)不區(qū)分大小寫(xiě)代碼示例:三種事件的基本用法// 方法1:傳統(tǒng)事件綁定document.onkeydown = function() { console.log("keydown觸發(fā)");};// 方法2:事件監(jiān)聽(tīng)(推薦,可綁定多個(gè)事件)document.addEventListener("keypress", function() { console.log("keypress觸發(fā)");});document.addEventListener("keyup", function() { console.log("keyup觸發(fā)");});1.1.2 鍵盤(pán)事件對(duì)象與 keyCode 屬性鍵盤(pán)事件對(duì)象提供了 keyCode 屬性,用于獲取按鍵對(duì)應(yīng)的 ASCII 碼值,是識(shí)別用戶輸入的關(guān)鍵:document.addEventListener("keyup", function(e) { console.log("按鍵碼:", e.keyCode); // 示例:判斷用戶是否按下 A 鍵(keyCode 65,不區(qū)分大小寫(xiě)) if (e.keyCode === 65) { console.log("用戶按下了 A 或 a 鍵"); }});// keypress 事件區(qū)分大小寫(xiě)(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 實(shí)戰(zhàn)案例:模擬京東搜索框按鍵定位需求: 當(dāng)用戶按下 S 鍵時(shí),自動(dòng)將光標(biāo)定位到搜索框。<input type="text" id="searchInput"><script>const searchInput = document.getElementById("searchInput"); document.addEventListener("keyup", function(e) {// S 鍵的 keyCode 為 83(不區(qū)分大小寫(xiě))if (e.keyCode === 83) { searchInput.focus(); // 元素獲取焦點(diǎn) searchInput.value = ""; // 可選:清空輸入框 } });</script>focus() 方法使輸入框獲得焦點(diǎn)keyup 事件在按鍵松開(kāi)時(shí)觸發(fā),避免連續(xù)觸發(fā)實(shí)際開(kāi)發(fā)中可結(jié)合 keydown 事件實(shí)現(xiàn)更靈敏的響應(yīng)二瀏覽器對(duì)象模型(BOM)深度解析
CodingFuture
2.1BOM 基礎(chǔ)概念
2.1.1 什么是 BOMBOM(Browser Object Model)即瀏覽器對(duì)象模型,是 JavaScript 操作瀏覽器窗口的接口,核心對(duì)象是 window。它與 DOM 的區(qū)別如下:DOM(文檔對(duì)象模型)BOM(瀏覽器對(duì)象模型)操作頁(yè)面文檔結(jié)構(gòu)操作瀏覽器窗口功能頂層對(duì)象是 document頂層對(duì)象是 windowW3C 標(biāo)準(zhǔn)化規(guī)范瀏覽器廠商自定義,兼容性差2.1.2 BOM 的核心構(gòu)成BOM 包含以下主要對(duì)象:window:瀏覽器窗口的頂級(jí)對(duì)象document:DOM 頂層對(duì)象(BOM 包含 DOM)location:URL 操作對(duì)象navigation:瀏覽器導(dǎo)航歷史screen:屏幕信息history:瀏覽器歷史記錄2.2window 對(duì)象詳解
2.2.1 window 對(duì)象的特性頂級(jí)對(duì)象身份:所有全局變量、函數(shù)默認(rèn)都是 window 的屬性瀏覽器接口:提供對(duì)話框(alert/prompt/confirm)、定時(shí)器等功能全局作用域:window.變量名 與 變量名 等價(jià)代碼示例:window 對(duì)象的使用// 顯式調(diào)用 window 屬性window.console.log("碼上未來(lái)");window.alert("Hello BOM");// 隱式調(diào)用(等價(jià)于 window 調(diào)用)var age = 23;console.log(age); // 等價(jià)于 window.age2.2.2 window 常用事件窗口 / 頁(yè)面加載事件第 1 種:window.onload觸發(fā)時(shí)機(jī):頁(yè)面所有資源(HTML、CSS、JS、圖片等)加載完成后語(yǔ)法:window.onload = function() {}; // 傳統(tǒng)方式window.addEventListener("load", function() {}); // 事件監(jiān)聽(tīng)方式注意:可在 HTML 頭部編寫(xiě) JS 代碼,因 onload 會(huì)等待所有資源加載第 2 種:DOMContentLoaded觸發(fā)時(shí)機(jī):僅當(dāng) DOM 結(jié)構(gòu)加載完成,不等待 CSS/JS/ 圖片語(yǔ)法:document.addEventListener("DOMContentLoaded", function() {});優(yōu)勢(shì):資源較多時(shí)響應(yīng)更快,適合首屏交互對(duì)比示例:<button id="btn">點(diǎn)擊我</button><script>// window.onload 等待所有資源 window.onload = function() { document.getElementById("btn").onclick = function() { alert("onload 綁定"); }; };// DOMContentLoaded 僅等 DOM 結(jié)構(gòu) document.addEventListener("DOMContentLoaded", function() { document.getElementById("btn").onclick = function() { alert("DOMContentLoaded 綁定"); }; });</script>窗口大小調(diào)整事件事件名:window.onresize觸發(fā)時(shí)機(jī):窗口寬度或高度發(fā)生變化時(shí)應(yīng)用場(chǎng)景:響應(yīng)式布局、動(dòng)態(tài)調(diào)整元素尺寸代碼示例:響應(yīng)式布局實(shí)現(xiàn)<div id="adaptDiv"></div><script> const div = document.getElementById("adaptDiv"); window.addEventListener("resize", function() { const screenWidth = window.innerWidth; // 獲取當(dāng)前屏幕寬度 if (screenWidth > 1000) { div.style.width = "800px"; div.style.backgroundColor = "blue"; } else { div.style.width = "600px"; div.style.backgroundColor = "green"; } });</script>2.3定時(shí)器機(jī)制與實(shí)戰(zhàn)
2.3.1 setTimeout:?jiǎn)未螆?zhí)行定時(shí)器(炸彈定時(shí)器)功能:延遲指定時(shí)間后執(zhí)行一次函數(shù)語(yǔ)法:setTimeout(回調(diào)函數(shù), 延遲毫秒數(shù))返回值:定時(shí)器標(biāo)識(shí)符(用于停止定時(shí)器)代碼示例:三種調(diào)用方式// 1. 匿名函數(shù)方式(推薦)setTimeout(function() { alert("2秒后爆炸!");}, 2000);// 2. 命名函數(shù)方式function explode(){ alert("命名函數(shù)爆炸!");}setTimeout(explode, 3000);// 3. 字符串方式(不推薦,性能差)setTimeout("explode(5)", 4000);function explode(sec){ alert(`${sec}秒后爆炸!`);}2.3.2 停止定時(shí)器:clearTimeout語(yǔ)法:clearTimeout(定時(shí)器標(biāo)識(shí)符)注意:必須保存 setTimeout 的返回值才能正確停止實(shí)戰(zhàn)案例:3 秒后關(guān)閉廣告<img src="ad.jpg" class="ad" alt="廣告圖"><script>const adImg = document.querySelector(".ad");// 保存定時(shí)器標(biāo)識(shí)符const timerId = setTimeout(function() { adImg.style.display = "none"; // 隱藏廣告圖 }, 3000);// 提供提前關(guān)閉按鈕(可選) document.addEventListener("click", function() { clearTimeout(timerId); // 點(diǎn)擊頁(yè)面任意位置取消定時(shí)器 });</script>2.3.3 setInterval:循環(huán)執(zhí)行定時(shí)器(鬧鐘定時(shí)器)功能:按指定間隔重復(fù)執(zhí)行函數(shù)語(yǔ)法:setInterval(回調(diào)函數(shù), 間隔毫秒數(shù))應(yīng)用場(chǎng)景:倒計(jì)時(shí)、輪播圖、實(shí)時(shí)數(shù)據(jù)刷新代碼示例:每秒打印一次信息// 開(kāi)啟定時(shí)器const intervalId = setInterval(function() {const now = new Date(); console.log(`當(dāng)前時(shí)間:${now.toLocaleTimeString()}`);}, 1000);// 10秒后停止定時(shí)器setTimeout(function() { clearInterval(intervalId); console.log("定時(shí)器已停止");}, 10000);2.3.4 定時(shí)器疊加問(wèn)題與解決方案問(wèn)題現(xiàn)象: 多次點(diǎn)擊開(kāi)啟按鈕會(huì)導(dǎo)致定時(shí)器疊加,無(wú)法正確停止。解決方案:使用布爾值標(biāo)記定時(shí)器狀態(tài)<button class="start">開(kāi)啟定時(shí)器</button><button class="stop">停止定時(shí)器</button><script> let timerId = null; let isRunning = false; // 標(biāo)記定時(shí)器是否運(yùn)行const startBtn = document.querySelector(".start");const stopBtn = document.querySelector(".stop"); startBtn.onclick = function() {if (!isRunning) { isRunning = true; timerId = setInterval(function() { console.log("定時(shí)器工作中..."); }, 1000); } }; stopBtn.onclick = function() {if (isRunning) { isRunning = false; clearInterval(timerId); console.log("定時(shí)器已停止"); } };</script>2.3.5 實(shí)戰(zhàn)案例:短信倒計(jì)時(shí)功能需求: 點(diǎn)擊發(fā)送按鈕后,按鈕變?yōu)榈褂?jì)時(shí)狀態(tài),60 秒內(nèi)不可重復(fù)點(diǎn)擊。手機(jī)號(hào)碼:<input type="number" id="phone"><button id="sendBtn">發(fā)送驗(yàn)證碼</button><script> const sendBtn = document.getElementById("sendBtn"); let countdown = 60; // 倒計(jì)時(shí)秒數(shù) sendBtn.onclick = function() { // 禁用按鈕 this.disabled = true; this.innerText = `剩余 ${countdown} 秒`; const timerId = setInterval(() => { countdown--; if (countdown <= 0) { // 倒計(jì)時(shí)結(jié)束 this.innerText = "發(fā)送驗(yàn)證碼"; this.disabled = false; clearInterval(timerId); countdown = 60; // 重置倒計(jì)時(shí) } else { this.innerText = `剩余 ${countdown} 秒`; } }, 1000); };</script>2.4 this 指向深入理解
this 的指向在函數(shù)執(zhí)行時(shí)確定,遵循以下規(guī)則:1.全局環(huán)境 / 普通函數(shù):指向 windowfunction fn(){ console.log(this); // window}fn();2.對(duì)象方法調(diào)用:指向調(diào)用者對(duì)象const person = { name: "張三", sayHi() { console.log(this.name); // 張三 }};person.sayHi();3.事件處理函數(shù):指向事件源元素button.onclick = function() {this.style.backgroundColor = "red"; // 點(diǎn)擊的按鈕變紅色};4.定時(shí)器函數(shù):指向 windowsetInterval(function() { console.log(this); // window}, 1000);5.構(gòu)造函數(shù):指向新創(chuàng)建的實(shí)例function Person(name){ this.name = name;}const p = new Person("李四");console.log(p.name); // 李四2.5location 對(duì)象與 URL 操作
2.5.1 URL 結(jié)構(gòu)解析URL(統(tǒng)一資源定位符)的標(biāo)準(zhǔn)結(jié)構(gòu):協(xié)議://主機(jī):端口/路徑?參數(shù)1=值1&參數(shù)2=值2#錨點(diǎn)示例:http://localhost:8080/path/to/page?name=張三&age=18#section12.5.2 location 對(duì)象常用屬性屬性名示例值(以 http://a.com:8080/path?k=v#錨點(diǎn) 為例)location.href完整 URL:http://a.com:8080/path?k=v#錨點(diǎn)location.search參數(shù)部分:?k=vlocation.pathname路徑:/pathlocation.host主機(jī) + 端口:a.com:8080location.port端口:80802.5.3 實(shí)戰(zhàn)案例:自動(dòng)跳轉(zhuǎn)頁(yè)面需求: 5 秒后自動(dòng)跳轉(zhuǎn)到首頁(yè),同時(shí)提供 “立即跳轉(zhuǎn)” 按鈕。<button id="jumpNow">立即跳轉(zhuǎn)</button><div id="countdown">5秒后返回首頁(yè)</div><script> const jumpBtn = document.getElementById("jumpNow"); const countdownDiv = document.getElementById("countdown"); let seconds = 5; // 立即跳轉(zhuǎn)功能 jumpBtn.onclick = function() { location.href = "http://www.baidu.com"; // 跳轉(zhuǎn)到百度 }; // 定時(shí)跳轉(zhuǎn)功能 const timerId = setInterval(function() { seconds--; countdownDiv.innerText = `${seconds}秒后返回首頁(yè)`; if (seconds <= 0) { location.href = "http://www.baidu.com"; clearInterval(timerId); } }, 1000);</script>三JavaScript 執(zhí)行機(jī)制揭秘
CodingFuture
3.1JS 單線程特性
JavaScript 是單線程語(yǔ)言,意味著:同一時(shí)間只能執(zhí)行一個(gè)任務(wù)所有任務(wù)按順序排隊(duì)執(zhí)行長(zhǎng)時(shí)間任務(wù)會(huì)阻塞頁(yè)面渲染影響:避免在主線程中執(zhí)行耗時(shí)操作(如大循環(huán)、復(fù)雜計(jì)算)耗時(shí)任務(wù)需通過(guò)異步處理(如定時(shí)器、AJAX)3.2同步任務(wù)與異步任務(wù)
3.2.1 同步任務(wù)定義:在主線程上按順序執(zhí)行的任務(wù)特點(diǎn):前一個(gè)任務(wù)完成后才執(zhí)行下一個(gè)示例:console.log(1); // 同步任務(wù)1console.log(2); // 同步任務(wù)23.2.2 異步任務(wù)定義:不進(jìn)入主線程,放入 “任務(wù)隊(duì)列” 的任務(wù)特點(diǎn):主線程空閑時(shí)才執(zhí)行類型:定時(shí)器事件(setTimeout/setInterval)事件監(jiān)聽(tīng)(點(diǎn)擊、滾動(dòng)等)資源加載(圖片、AJAX 請(qǐng)求等)代碼示例:同步與異步對(duì)比console.log(1); // 同步任務(wù)1// 異步任務(wù):2秒后執(zhí)行setTimeout(function() { console.log(3); // 異步任務(wù)回調(diào)}, 2000);console.log(2); // 同步任務(wù)2// 輸出順序:1 → 2 → 3(2秒后)3.3事件循環(huán)(Event Loop)機(jī)制
3.3.1 核心概念執(zhí)行棧:主線程中正在執(zhí)行的任務(wù)隊(duì)列任務(wù)隊(duì)列:存放異步任務(wù)的回調(diào)函數(shù)事件循環(huán):主線程不斷從任務(wù)隊(duì)列中提取異步任務(wù)執(zhí)行3.3.2 執(zhí)行流程先執(zhí)行執(zhí)行棧中的所有同步任務(wù)異步任務(wù)產(chǎn)生時(shí),將回調(diào)函數(shù)放入任務(wù)隊(duì)列同步任務(wù)執(zhí)行完畢后,從任務(wù)隊(duì)列中按順序提取異步任務(wù)放入執(zhí)行棧執(zhí)行重復(fù)步驟 3,形成 “事件循環(huán)”3.3.3 案例解析:異步任務(wù)執(zhí)行順序案例 1:console.log(1);setTimeout(function() { console.log(3);}, 0); // 延遲0毫秒(立即進(jìn)入任務(wù)隊(duì)列)console.log(2);// 輸出順序:1 → 2 → 3// 解析:setTimeout 是異步任務(wù),進(jìn)入任務(wù)隊(duì)列,主線程先執(zhí)行完同步任務(wù)1和2案例2:console.log(1);setTimeout(function() { console.log(3);}, 0);// 模擬耗時(shí)的同步任務(wù)for (let i = 0; i < 10000; i++) { console.log(2);}// 輸出順序:1 → 2(10000次)→ 3// 解析:for循環(huán)是同步任務(wù),阻塞主線程,任務(wù)隊(duì)列中的定時(shí)器回調(diào)需等待其完成3.4異步編程的重要性
避免頁(yè)面卡頓:耗時(shí)任務(wù)(如網(wǎng)絡(luò)請(qǐng)求、大文件處理)不阻塞主線程優(yōu)化用戶體驗(yàn):界面交互與后臺(tái)任務(wù)可并行處理典型應(yīng)用:圖片懶加載無(wú)限滾動(dòng)加載實(shí)時(shí)數(shù)據(jù)推送(WebSocket)
結(jié)言陳詞Closing statement同學(xué)們,今天的課程系統(tǒng)講解鍵盤(pán)事件交互邏輯、BOM 各對(duì)象操作(如 window 事件、location 跳轉(zhuǎn))與定時(shí)器實(shí)戰(zhàn),剖析 JS 同步 / 異步任務(wù)執(zhí)行原理。掌握這些知識(shí)可提升網(wǎng)頁(yè)交互開(kāi)發(fā)能力,優(yōu)化用戶體驗(yàn)與代碼執(zhí)行效率。下期課程預(yù)告:JavaScript基礎(chǔ)-ES6碼上未來(lái)為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細(xì)課程大綱
微信號(hào):CodingFuture2020
The CodingFuture&The Future is Already Here<<< END >>>
資深職業(yè)咨詢規(guī)劃師
微信號(hào):155******12
相關(guān)資訊
CAAC 執(zhí)照:低空經(jīng)濟(jì)時(shí)代的 “硬通貨” 與個(gè)人發(fā)展的 “跳板”
2025/6/25 11:21:30CAAC 無(wú)人機(jī)駕駛證:技術(shù)革新與職業(yè)發(fā)展的 “雙重引擎”
2025/6/25 11:20:53“大連碼上未來(lái)IT培訓(xùn)”是碼上未來(lái)科技(大連)有限公司在教育寶平臺(tái)開(kāi)設(shè)的店鋪,若該店鋪內(nèi)信息涉嫌虛假或違法,請(qǐng)點(diǎn)擊這里向教育寶反饋,我們將及時(shí)進(jìn)行處理。
環(huán)境:5.0師資:5.0服務(wù):5.0效果:5.0
店鋪名稱:大連碼上未來(lái)IT培訓(xùn)
單位名稱:碼上未來(lái)科技(大連)有限公司
賬號(hào)名稱:mswl(158******92)
所屬城市:遼寧大連
入駐時(shí)長(zhǎng):6年
在線客服:在線聊
HTML5前端開(kāi)發(fā)試學(xué)課
¥99
JAVA微服務(wù)開(kāi)發(fā)試學(xué)課
¥99
互聯(lián)網(wǎng)全棧開(kāi)發(fā)
JAVA微服務(wù)開(kāi)發(fā)
HTML5前端開(kāi)發(fā)