JavaScript【6】事件

1.概述：

  • 在 JavaScript 中，事件（Event）是瀏覽器或 DOM（文檔對象模型）與 JavaScript 代碼之間交互的一種機制。

  • 它代表了在瀏覽器環境中發生的特定行為或者動作，比如用戶點擊鼠標、敲擊鍵盤、頁面加載完成、元素獲得或失去焦點等情況。這些事件可以被 JavaScript 代碼捕獲并進行相應的處理。

2.表單事件：

1.獲取/失去焦點：onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onblur = function () {//失去焦點時this.style.backgroundColor = "green";}text.onfocus = function () {//獲得焦點時this.style.backgroundColor = "red";}
</script></body>
</html>

默認輸入框背景無填充色，只有觸發下面事件才會將背景填充為對應顏色

點擊輸入框，此時獲得焦點，觸發獲得焦點事件，將輸入框背景改為紅色

點擊輸入框以外的區域，此時失去焦點，觸發失去焦點事件，將輸入框背景改為綠色

2.節點內容改變：onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onchange = function () {//節點的內容改變時console.log(this.value)}
</script></body>
</html>

當輸入1時，控制臺輸入1；

當刪除輸入框中的1后再重新輸入1，發現控制臺沒有再次輸出，說明此時沒有觸發該事件；

當輸入框內的內容發送改變時，會再次觸發該事件，并將輸入值打印到控制臺；

3.輸入框有內容輸入時：oninput

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.oninput = function () {//在用戶輸入時執行console.log(this.value)}
</script></body>
</html>

沒有內容輸入時，不觸發該事件；

輸入內容時，會將輸入內容打印到控制臺

當刪除輸入框內容時，會觸發該事件，控制臺打印空數據

當再次輸入1時，再次觸發該事件，控制臺再次打印該數據

4.選取元素時：onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onselect = function () {console.log("選取元素時執行",this.value)}</script></body>
</html>

輸入框輸入內容時，不觸發該事件

當選取輸入內容時，觸發該事件，將輸入內容打印到控制臺

5.提交時：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//當返回值為fasle  阻止提交// true  允許提交return false;}*/</script></body>
</html>

此時返回值為false，點擊提交按鈕時不會觸發提交事件，該表單不會被提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//當返回值為fasle  阻止提交// true  允許提交return true;}</script></body>
</html>

當返回值為true時，點擊提交按鈕會觸發該事件，該表單會被提交（#表示提交到當前頁面）

3.窗口事件：

1.獲得/失去焦點時：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onblur = function () {console.log('窗口失去了焦點')}window.onfocus = function () {console.log('窗口獲得了焦點')}</script></body>
</html>

此時剛打開頁面，不觸發事件，所以控制臺無輸出

當點擊左側窗口區域時，觸發獲得焦點事件，控制臺打印對應內容

當再次點擊窗口外區域時，觸發失去焦點事件，控制臺再次打印對應內容

2.頁面加載完成時：onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onload= function () {//當頁面加載完成后執行console.log("頁面加載完成")}</script></body>
</html>  


 當使用低網速加載測試時，可以發現，不是一打開頁面就會觸發該事件，而是只有當整個頁面加載出來后，才會觸發該事件；

3.窗口大小改變時：onresize

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.onresize= function () {console.log("頁面大小正在改變")}</script></body>
</html>

頁面加載完成時，未觸發事件

此時將窗口區域面積減小時，觸發了該事件，并在控制臺打印對應信息

4.鍵盤事件：

1.鍵盤按下時觸發：onkeydown

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");//鍵盤按下時執行text.onkeydown = function (event) {// 解決兼容問題event = event || window.event;// key 按鍵//console.log("按下的鍵：", event.keyCode)console.log("按下的鍵：",event.key)}</script></body>
</html>

只要在鍵盤上按下按鍵，每按一次就會觸發一次該事件，（如果長按則會重復觸發），并將按鍵輸出到控制臺；

2.鍵盤彈起時觸發：onkeyup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeyup = function (event) {console.log("按鍵彈起時：",event.key)}</script></body>
</html>

當長按1時，不會觸發該事件，只有當松開時，會觸發1次該事件

3.按下彈起時觸發：onkeypress

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeypress = function (event) {console.log("按下彈起時：",event.key)}</script></body>
</html>

只有當按下并松開時才會觸發該事件

4.案例：通過方向鍵控制色塊移動

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;"></div>
<script>let box = document.getElementById("box");document.onkeydown = function (event) {let speed = 10;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";break;}}</script></body>
</html>

這是頁面剛加載出來時色塊的位置，此時我們可以通過方向鍵改變色塊的位置

5.鼠標事件：

1.單擊左鍵觸發：onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onclick = function () {console.log("單擊事件觸發");}</script>
</body>
</html>

在元素區域（色塊）內，單機鼠標左鍵，觸發該事件

2.雙擊觸發：ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.ondblclick = function () {console.log("雙擊事件觸發");}</script>
</body>
</html>

雙擊元素區域，觸發該事件

3.鼠標任意按鍵按下或松開時觸發：onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousedown = function () {console.log("鼠標按鈕按下時");}box.onmouseup = function () {console.log("鼠標按鈕松開時");}</script>
</body>
</html>

在元素區域內按下或松開鼠標任意按鍵對會觸發對應事件

4.鼠標指針移動時觸發：onmousemove

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousemove = function () {console.log("鼠標指針移動時");}</script>
</body>
</html>

當鼠標指針在元素區域內移動時，就會重復觸發該事件

5.鼠標指針移入或移出時觸發：

不能阻止事件冒泡：onmouseover/onmouseout
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseover = function () {// 不能阻止事件的冒泡console.log("鼠標指針移動到元素上時");}box.onmouseout = function () {// 不能阻止事件的冒泡console.log("鼠標指針移動出元素上時");}</script>
</body>
</html>

當指針移入元素區域或移出元素區域時，都會觸發對應事件

可以阻止事件冒泡：
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseenter = function () {// 能阻止事件的冒泡console.log("鼠標指針移動到元素上時");}box.onmouseleave = function () {// 能阻止事件的冒泡console.log("鼠標指針移動出元素上時");}</script>
</body>
</html>

當指針移入元素區域或移出元素區域時，都會觸發對應事件

6.鼠標滾輪滑動時觸發：

1.有無內容都可觸發（滑動滾輪）：onmousewheel
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");// 有沒有內容都會觸發/* box.onmousewheel = function () {console.log("鼠標的滾輪滾動時")}*/</script>
</body>
</html>

在元素區域內滑動鼠標滾輪，不管元素區域內有沒有內容，都會觸發該事件

2.必須有內容才會觸發（滑動滾動條）：
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");//有內容才能觸發box.onscroll = function () {console.log("滾動條滾動了")}</script>
</body>
</html>

此時元素區域內無內容，滑動鼠標滾輪不會觸發該事件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容我是一段內容
</div>
<script>let box = document.getElementById("box");//有內容才能觸發box.onscroll = function () {console.log("滾動條滾動了")}</script>
</body>
</html>

此時元素區域內有內容，當我們滑動鼠標滾輪時會重復觸發該事件

6.事件冒泡：

1.概述：

  事件冒泡 （Bubble）：是指事件向上傳導，當后代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發；

2.示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的單擊事件觸發了")}div2.onclick = function () {console.log("div2 的單擊事件觸發了")}
</script>
</body>
</html>

 在上面案例中，DIV2作為DIV1的子節點，當我們單擊DIV2區域時，鼠標單擊事件會向上傳導到其父節點DIV1中，通過測試結果我們也可以看出當我們單擊子節點div2時，不僅div2節點觸發了該事件，其父節點div1節點也觸發了該事件；

3.避免事件冒泡：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的單擊事件觸發了")}div2.onclick = function () {console.log("div2 的單擊事件觸發了")stopBubble();}//取消事件的冒泡function stopBubble(event) {//處理瀏覽器兼容性問題if (event && event.stopPropagation) {event.stopPropagation()} else {window.event.cancelBubble = true;}}
</script>
</body>
</html>

此時單擊div2區域，該事件不會再傳導到其父節點div1中；

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/81286.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/81286.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/81286.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【Java ee初階】HTTP（2）

【Java ee初階】HTTP（2）

一、HTTP的方法 方法 說明 支持的HTTP協議版本 GET 獲取資源 1.0、1.1 POST 傳輸實體主體 1.0、1.1 PUT 傳輸文件 1.0、1.1 HEAD 獲得報文首部 1.0、1.1 DELETE 刪除文件 1.0、1.1 OPTIONS 詢問支持的方法 1.1 TRACE 追蹤路徑 1.1 CONNECT 要求用隧道…
閱讀更多...
文件名是 ?E:\20250512_191204.mp4， EV軟件錄屏，未保存直接關機損壞， 如何修復？

文件名是 ?E:\20250512_191204.mp4， EV軟件錄屏，未保存直接關機損壞， 如何修復？

去github上下載untrunc 工具就能修復 https://github.com/anthwlock/untrunc/releases 如果訪問不了 本機的 hosts文件設置 140.82.112.3 github.com 199.232.69.194 github.global.ssl.fastly.net 就能訪問了 實在不行&#xff0c;從這里下載&#xff0c;傳上去了 https://do…
閱讀更多...
騰訊 CodeBuddy 殺入 AI 編程賽道，能否撼動海外工具霸主地位？

騰訊 CodeBuddy 殺入 AI 編程賽道，能否撼動海外工具霸主地位？

在 AI 編程助手領域&#xff0c;海外的 Cursor 等工具風頭正勁&#xff0c;如今騰訊帶著 CodeBuddy 隆重登場&#xff0c;國產 AI 編程助手能否借其之力崛起&#xff1f;讓我們一探究竟。 官網&#xff1a; 騰訊云代碼助手 CodeBuddy - AI 時代的智能編程伙伴 實戰安裝教程 …
閱讀更多...
PySide6 GUI 學習筆記——常用類及控件使用方法（常用類顏色常量QColorConstants）

PySide6 GUI 學習筆記——常用類及控件使用方法（常用類顏色常量QColorConstants）

文章目錄 一、概述二、顏色常量表標準 Qt 顏色SVG 顏色&#xff08;部分&#xff09; 三、Python 代碼示例四、代碼說明五、版本兼容性六、延伸閱讀 一、概述 QColorConstants 是 Qt for Python 提供的一個預定義顏色常量集合&#xff0c;包含標準Qt顏色和SVG規范顏色。這些常…
閱讀更多...
MATLAB 自然語言處理入門教程

MATLAB 自然語言處理入門教程

文章目錄 前言環境配置一、MATLAB NLP 工具箱概述二、核心功能與 API1. 文本數據準備2. 特征提取3. 文本分類&#xff08;傳統機器學習&#xff09;4. 深度學習文本分類&#xff08;LSTM&#xff09; 三、實戰案例&#xff1a;情感分析四、高級應用1. 命名實體識別&#xff08;…
閱讀更多...
C++ deque雙端隊列、deque對象創建、deque賦值操作

C++ deque雙端隊列、deque對象創建、deque賦值操作

在deque中&#xff0c;front()是頭部元素&#xff0c;back()指的是尾部元素。begin()是指向頭部的迭代器&#xff0c;end()是指向尾部的下一個元素的迭代器。 push_front 頭部進行插入 pop_front 尾部進行刪除 push_back 尾部進行插入 pop_back 尾部進行刪除 deque如果同時…
閱讀更多...
java每日精進 5.15【分頁實現】

java每日精進 5.15【分頁實現】

1. 什么是對象轉換和數據翻譯&#xff1f; 對象轉換 對象轉換是指將一種類型的對象&#xff08;如數據庫實體 UserDO&#xff09;轉換為另一種類型的對象&#xff08;如前端響應對象 UserVO 或服務層 DTO&#xff09;。例如&#xff0c;一個 UserDO 包含用戶 ID、姓名和部門 …
閱讀更多...
什么是API接口？API接口的核心價值

什么是API接口？API接口的核心價值

隨著互聯網技術的蓬勃發展&#xff0c;API 接口作為不同應用程序之間的關鍵紐帶&#xff0c;其重要性愈發凸顯。本文將從專業視角&#xff0c;深入剖析 API 接口的分類、原理、請求方式以及安全機制等核心要素&#xff0c;助力讀者全面理解這一數字化基礎設施。 一、API 接口及…
閱讀更多...
Linux_ELF文件

Linux_ELF文件

目錄 前言&#xff1a; 一、ELF文件的類型 二、ELF文件的組成格式 1. ELF頭部(ELF Header) 2. 節頭表(Section Header Table) 3. 程序頭表(Program Header Table) 4. 節(Sections)與段(Segments) 三、ELF文件從形成到加載輪廓 1、ELF可執行文件形成過程 2、 可執行文…
閱讀更多...
Go語言語法---輸入控制

Go語言語法---輸入控制

文章目錄 1. fmt包讀取輸入1.1. 讀取單個值1.2. 讀取多個值 2. 格式化輸入控制 在Go語言中&#xff0c;控制輸入主要涉及從標準輸入(鍵盤)或文件等來源讀取數據。以下是幾種常見的輸入控制方法&#xff1a; 1. fmt包讀取輸入 fmt包中的Scan和Scanln函數都可以讀取輸入&#xf…
閱讀更多...
【PostgreSQL數據分析實戰：從數據清洗到可視化全流程】附錄-C. 常用SQL腳本模板

【PostgreSQL數據分析實戰：從數據清洗到可視化全流程】附錄-C. 常用SQL腳本模板

?? 點擊關注不迷路 ?? 點擊關注不迷路 ?? 點擊關注不迷路 文章大綱 附錄C. 常用SQL腳本模板速查表一、數據清洗與預處理模板二、數據聚合與分析模板三、窗口函數應用模板四、性能優化與監控模板五、數據備份與恢復模板六、權限管理與安全模板七、事務與錯誤處理模板八、時…
閱讀更多...
51單片機課設基于GM65模塊的二維碼加條形碼識別

51單片機課設基于GM65模塊的二維碼加條形碼識別

系統組成 主控單元&#xff1a;51單片機&#xff08;如STC89C52&#xff09;作為核心控制器&#xff0c;協調各模塊工作。 掃描模塊&#xff1a;GM65條碼掃描頭&#xff0c;支持二維碼/條形碼識別&#xff0c;通過串口&#xff08;UART&#xff09;與單片機通信。 顯示模塊&a…
閱讀更多...
【OpenGL學習】（二）OpenGL渲染簡單圖形

【OpenGL學習】（二）OpenGL渲染簡單圖形

文章目錄 【OpenGL學習】&#xff08;二&#xff09;OpenGL渲染簡單圖形OpenGL渲染圖形流程頂點&#xff0c;圖元和片元VAO&#xff0c;VBO &#xff0c;EBO著色器示例&#xff1a;使用OpenGL渲染三角形 【OpenGL學習】&#xff08;二&#xff09;OpenGL渲染簡單圖形 OpenGL渲…
閱讀更多...
基于STM32的INA226電壓電流檢測儀

基于STM32的INA226電壓電流檢測儀

系統總體框圖 功率檢測裝置原理圖功能及模塊連接說明 一、系統功能概述 該裝置以STM32F103C8T6微控制器為核心&#xff0c;集成功率檢測、數據交互、狀態顯示和用戶提示功能&#xff0c;通過模塊化設計實現穩定運行。 二、各模塊功能及連接方式 按鍵模塊 功能&#xff1a…
閱讀更多...
YOLOv2目標檢測算法：速度與精度的平衡之道

YOLOv2目標檢測算法：速度與精度的平衡之道

一、YOLOv2的核心改進&#xff1a;從V1到V2的蛻變 YOLOv2作為YOLO系列的第二代算法&#xff0c;在繼承V1端到端、單階段檢測的基礎上&#xff0c;針對V1存在的小目標檢測弱、定位精度低等問題進行了全方位升級&#xff0c;成為目標檢測領域的重要里程碑。 &#xff08;一&am…
閱讀更多...
將嵌入映射到 Elasticsearch 字段類型：semantic_text、dense_vector、sparse_vector

將嵌入映射到 Elasticsearch 字段類型：semantic_text、dense_vector、sparse_vector

作者&#xff1a; Andre Luiz 討論如何以及何時使用 semantic_text、dense_vector 或 sparse_vector&#xff0c;以及它們與嵌入生成的關系。 通過這個自定進度的 Search AI 實踐學習親自體驗向量搜索。你可以開始免費云試用&#xff0c;或者在本地機器上嘗試 Elastic。 多年來…
閱讀更多...
uniapp取消瀏覽自動填充

uniapp取消瀏覽自動填充

為了防止瀏覽器自動將記住的密碼回填進type"password"輸入框&#xff0c;所以在type"password"輸入框上面加了兩行代碼&#xff0c;使瀏覽器將密碼填充到新加的輸入框里&#xff0c;并將這兩個input隱藏掉 <input type"password" autocomple…
閱讀更多...
從數據包到可靠性：UDP/TCP協議的工作原理分析

從數據包到可靠性：UDP/TCP協議的工作原理分析

之前我們已經使用udp/tcp的相關接口寫了一些簡單的客戶端與服務端代碼。也了解了協議是什么&#xff0c;包括自定義協議和知名協議比如http/https和ssh等。現在我們再回到傳輸層&#xff0c;對udp和tcp這兩傳輸層巨頭協議做更深一步的分析。 一.UDP UDP相關內容很簡單&#xf…
閱讀更多...
顯卡、Cuda和pytorch兼容問題

顯卡、Cuda和pytorch兼容問題

這里寫目錄標題 驅動與CUDA版本兼容性問題1. **驅動與CUDA版本兼容性問題**2. **任務特性與硬件適配差異**3. **優化策略與框架配置差異**4. **散熱與功耗限制**5. **數據傳輸與CPU瓶頸**排查建議總結 查詢PyTorch中實際使用的CUDA版本**1. 查詢PyTorch中實際使用的CUDA版本***…
閱讀更多...
DeepSeek 大模型部署全指南：常見問題、優化策略與實戰解決方案

DeepSeek 大模型部署全指南：常見問題、優化策略與實戰解決方案

DeepSeek 作為當前最熱門的開源大模型之一&#xff0c;其強大的語義理解和生成能力吸引了大量開發者和企業關注。然而在實際部署過程中&#xff0c;無論是本地運行還是云端服務&#xff0c;用戶往往會遇到各種技術挑戰。本文將全面剖析 DeepSeek 部署中的常見問題&#xff0c;提…
閱讀更多...
最新文章

Copyright @ 2022~2023