HTML 各種事件的使用說明書

HTML 各種事件的使用說明書

1. HTML 事件簡介

HTML事件是瀏覽器或用戶在網頁上執行的動作或發生的事情。當這些事件發生時，可以通過JavaScript來響應和處理這些事件，從而實現網頁的交互功能。事件處理是Web前端開發中實現動態交互的核心機制。

基本概念

  • 事件：用戶或瀏覽器執行的動作（如點擊、加載、鼠標移動等）
  • 事件源：產生事件的HTML元素
  • 事件處理器：處理事件的JavaScript函數
  • 事件監聽：通過JavaScript代碼為元素添加事件處理器的過程
  • 事件對象：包含事件相關信息的對象（如鼠標位置、鍵盤按鍵等）

事件的作用

  • 實現用戶與網頁的交互
  • 響應用戶操作（如點擊按鈕、填寫表單等）
  • 監測瀏覽器狀態變化（如頁面加載完成、窗口大小改變等）
  • 創建動態效果和動畫
  • 驗證表單數據

2. 事件處理器的添加方式

2.1 內聯事件處理器

直接在HTML標簽中使用事件屬性來定義事件處理器。

語法：

<element event="JavaScript代碼">

示例：

<button onclick="alert('按鈕被點擊了！')">點擊我</button>
<img src="image.jpg" onmouseover="this.style.width='300px'" onmouseout="this.style.width='200px'" width="200">

說明：這種方式簡單直觀，但不符合內容與行為分離的原則，不推薦在大型項目中使用。

2.2 DOM 屬性事件處理器

通過JavaScript為DOM元素的事件屬性賦值來定義事件處理器。

語法：

element.event = function() {// 事件處理代碼
};

示例：

<button id="myButton">點擊我</button><script>document.getElementById("myButton").onclick = function() {alert("按鈕被點擊了！");};
</script>

說明：這種方式比內聯事件處理器好，但一個元素只能有一個事件處理器（后設置的會覆蓋先設置的）。

2.3 事件監聽方式

使用addEventListener()方法為元素添加事件監聽器。這是現代Web開發中推薦的方式。

語法：

element.addEventListener(event, function, useCapture);

參數說明：

  • event：事件類型（不含"on"前綴，如"click"而不是"onclick"）
  • function：事件發生時要執行的函數
  • useCapture：布爾值，指定事件是否在捕獲階段觸發（默認為false，即在冒泡階段觸發）

示例：

<button id="myButton">點擊我</button><script>document.getElementById("myButton").addEventListener("click", function() {alert("按鈕被點擊了！");});// 也可以使用命名函數function handleClick() {alert("再次點擊了按鈕！");}document.getElementById("myButton").addEventListener("click", handleClick);
</script>

說明：

  • 可以為同一元素的同一事件添加多個事件處理器
  • 可以使用removeEventListener()方法移除事件監聽器
  • 支持事件冒泡和捕獲的控制

3. 事件對象

當事件發生時，瀏覽器會創建一個包含事件相關信息的事件對象，并將其作為參數傳遞給事件處理器。

常用事件對象屬性

屬性描述
type獲取事件類型
target獲取觸發事件的元素
currentTarget獲取綁定事件監聽器的元素
bubbles指示事件是否冒泡
cancelable指示是否可以取消事件的默認行為
defaultPrevented指示是否已調用preventDefault()方法
timeStamp獲取事件發生的時間戳
clientX, clientY獲取鼠標在視口內的坐標
pageX, pageY獲取鼠標在整個文檔中的坐標
screenX, screenY獲取鼠標在屏幕中的坐標
key, code獲取鍵盤事件中的按鍵信息

常用事件對象方法

方法描述
preventDefault()取消事件的默認行為
stopPropagation()阻止事件冒泡
stopImmediatePropagation()阻止事件冒泡并阻止同一事件的其他監聽器被調用

示例：

<button id="myButton">點擊我</button><script>document.getElementById("myButton").addEventListener("click", function(event) {console.log("事件類型：" + event.type);console.log("觸發事件的元素：" + event.target);console.log("鼠標位置：" + event.clientX + "," + event.clientY);});// 阻止默認行為示例document.querySelector("a").addEventListener("click", function(event) {event.preventDefault(); // 阻止鏈接跳轉alert("鏈接點擊被阻止了！");});
</script>

4. 事件類型

HTML支持多種類型的事件，以下是常用的事件類型分類及詳細說明。

4.1 鼠標事件

鼠標事件是用戶與鼠標交互時觸發的事件。

事件描述
click當用戶點擊元素時觸發
dblclick當用戶雙擊元素時觸發
mousedown當用戶按下鼠標按鈕時觸發
mouseup當用戶釋放鼠標按鈕時觸發
mouseover當鼠標指針移到元素上時觸發
mouseout當鼠標指針移出元素時觸發
mousemove當鼠標指針在元素上移動時觸發
contextmenu當用戶右鍵點擊元素打開上下文菜單時觸發
mouseenter當鼠標指針進入元素時觸發（不冒泡）
mouseleave當鼠標指針離開元素時觸發（不冒泡）

示例：

<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div><script>const div = document.getElementById("myDiv");div.addEventListener("click", function() { alert("點擊了div"); });div.addEventListener("dblclick", function() { alert("雙擊了div"); });div.addEventListener("mouseover", function() { this.style.backgroundColor = "lightgreen"; });div.addEventListener("mouseout", function() { this.style.backgroundColor = "lightblue"; });div.addEventListener("mousemove", function(event) {console.log("鼠標位置：X=" + event.clientX + ", Y=" + event.clientY);});
</script>

4.2 鍵盤事件

鍵盤事件是用戶與鍵盤交互時觸發的事件。

事件描述
keydown當用戶按下鍵盤上的鍵時觸發
keyup當用戶釋放鍵盤上的鍵時觸發
keypress當用戶按下并釋放鍵盤上的字符鍵時觸發（不推薦使用，已被keydown和keyup替代）
input當輸入框的值發生變化時觸發（適用于鍵盤輸入和粘貼等操作）

示例：

<input type="text" id="myInput" placeholder="輸入一些內容..."><script>const input = document.getElementById("myInput");input.addEventListener("keydown", function(event) {console.log("按下的鍵：" + event.key);if (event.key === "Enter") {alert("你按下了Enter鍵！");}});input.addEventListener("input", function() {console.log("輸入內容：" + this.value);});
</script>

4.3 表單事件

表單事件與HTML表單元素相關，通常在用戶提交表單或修改表單元素的值時觸發。

事件描述
submit當用戶提交表單時觸發
reset當用戶重置表單時觸發
change當表單元素的值發生變化且失去焦點時觸發（適用于select、checkbox、radio等）
input當表單元素的值發生變化時觸發（實時監聽，適用于所有輸入元素）
focus當元素獲得焦點時觸發
blur當元素失去焦點時觸發
select當用戶選擇文本輸入框中的內容時觸發
invalid當表單元素的值驗證失敗時觸發

示例：

<form id="myForm"><div><label for="username">用戶名：</label><input type="text" id="username" name="username" required></div><div><label for="password">密碼：</label><input type="password" id="password" name="password" required minlength="6"></div><button type="submit">提交</button><button type="reset">重置</button>
</form><script>const form = document.getElementById("myForm");const username = document.getElementById("username");const password = document.getElementById("password");form.addEventListener("submit", function(event) {event.preventDefault(); // 阻止表單默認提交alert("表單提交成功！");});form.addEventListener("reset", function() {alert("表單已重置！");});username.addEventListener("focus", function() {this.style.backgroundColor = "#f0f0f0";});username.addEventListener("blur", function() {this.style.backgroundColor = "white";});password.addEventListener("input", function() {if (this.value.length < 6) {this.style.borderColor = "red";} else {this.style.borderColor = "green";}});
</script>

4.4 文檔/窗口事件

這些事件與整個文檔或瀏覽器窗口相關。

事件描述
load當整個頁面及所有依賴資源（如圖片、腳本等）加載完成時觸發
DOMContentLoaded當HTML文檔加載并解析完成，而無需等待樣式表、圖像和子框架加載時觸發
unload當用戶離開頁面時觸發（關閉窗口、導航到其他頁面等）
beforeunload在頁面即將被卸載前觸發，可以詢問用戶是否確認離開
resize當瀏覽器窗口的大小改變時觸發
scroll當頁面滾動時觸發
error當加載外部資源（如圖像、腳本等）失敗時觸發
online當瀏覽器連接到網絡時觸發
offline當瀏覽器斷開網絡連接時觸發

示例：

<script>// 頁面加載完成后執行window.addEventListener("load", function() {alert("頁面加載完成！");});// DOM樹構建完成后執行document.addEventListener("DOMContentLoaded", function() {console.log("DOM結構已加載完成！");});// 窗口大小改變時執行window.addEventListener("resize", function() {console.log("窗口寬度：" + window.innerWidth + ", 窗口高度：" + window.innerHeight);});// 頁面滾動時執行window.addEventListener("scroll", function() {console.log("滾動位置：" + window.scrollY);});// 頁面即將離開時執行window.addEventListener("beforeunload", function(event) {event.preventDefault();event.returnValue = "您確定要離開嗎？";return "您確定要離開嗎？";});
</script>

4.5 觸摸事件

觸摸事件是移動設備上用戶與觸摸屏交互時觸發的事件。

事件描述
touchstart當用戶觸摸屏幕時觸發
touchend當用戶停止觸摸屏幕時觸發
touchmove當用戶在屏幕上滑動時觸發
touchcancel當觸摸事件被中斷時觸發（如接電話）

示例：

<div id="touchArea" style="width: 300px; height: 200px; background-color: lightblue;">在移動設備上觸摸此區域
</div><script>const touchArea = document.getElementById("touchArea");touchArea.addEventListener("touchstart", function(event) {console.log("觸摸開始，觸摸點數量：" + event.touches.length);this.style.backgroundColor = "lightgreen";});touchArea.addEventListener("touchend", function() {console.log("觸摸結束");this.style.backgroundColor = "lightblue";});touchArea.addEventListener("touchmove", function(event) {event.preventDefault(); // 阻止默認滾動行為const touch = event.touches[0];console.log("觸摸移動位置：" + touch.clientX + "," + touch.clientY);});
</script>

4.6 拖放事件

拖放事件用于實現HTML元素的拖放功能。

事件描述
dragstart當開始拖動元素時觸發
drag當拖動元素時持續觸發
dragend當拖動結束時觸發
dragenter當拖動的元素進入放置目標時觸發
dragover當拖動的元素在放置目標上方移動時觸發
dragleave當拖動的元素離開放置目標時觸發
drop當在放置目標上釋放拖動的元素時觸發

示例：

<div id="draggable" draggable="true" style="width: 100px; height: 100px; background-color: lightblue;">拖動我
</div>
<div id="droppable" style="width: 200px; height: 200px; background-color: lightgray; margin-top: 20px;">放置在這里
</div><script>const draggable = document.getElementById("draggable");const droppable = document.getElementById("droppable");draggable.addEventListener("dragstart", function(event) {event.dataTransfer.setData("text/plain", event.target.id);this.style.opacity = "0.5";});draggable.addEventListener("dragend", function() {this.style.opacity = "1";});droppable.addEventListener("dragenter", function(event) {event.preventDefault();this.style.backgroundColor = "lightgreen";});droppable.addEventListener("dragover", function(event) {event.preventDefault(); // 必須阻止默認行為才能觸發drop事件});droppable.addEventListener("dragleave", function() {this.style.backgroundColor = "lightgray";});droppable.addEventListener("drop", function(event) {event.preventDefault();const data = event.dataTransfer.getData("text/plain");const element = document.getElementById(data);this.appendChild(element);this.style.backgroundColor = "lightgray";});
</script>

4.7 剪貼板事件

剪貼板事件與剪貼板操作（復制、剪切、粘貼）相關。

事件描述
copy當用戶復制元素內容時觸發
cut當用戶剪切元素內容時觸發
paste當用戶粘貼內容到元素時觸發

示例：

<input type="text" id="copyInput" value="可以復制我">
<div id="pasteArea" contenteditable="true" style="width: 300px; height: 100px; border: 1px solid black;">在此粘貼內容
</div><script>const copyInput = document.getElementById("copyInput");const pasteArea = document.getElementById("pasteArea");copyInput.addEventListener("copy", function(event) {event.preventDefault();const text = window.getSelection().toString();event.clipboardData.setData("text/plain", text + "（已復制）");alert("內容已復制到剪貼板！");});pasteArea.addEventListener("paste", function(event) {event.preventDefault();const text = event.clipboardData.getData("text/plain");document.execCommand("insertText", false, text);alert("內容已粘貼！");});
</script>

4.8 媒體事件

媒體事件與HTML5音頻和視頻元素相關。

事件描述
play當媒體開始播放時觸發
pause當媒體暫停時觸發
ended當媒體播放結束時觸發
timeupdate當媒體的播放位置發生變化時觸發
volumechange當媒體的音量發生變化時觸發
error當媒體加載或播放出錯時觸發
loadedmetadata當媒體的元數據（如時長、尺寸等）加載完成時觸發
loadeddata當媒體的首幀數據加載完成時觸發
progress當瀏覽器正在加載媒體數據時觸發

示例：

<audio id="myAudio" controls><source src="audio.mp3" type="audio/mpeg">您的瀏覽器不支持音頻播放。
</audio><script>const audio = document.getElementById("myAudio");audio.addEventListener("play", function() {console.log("音頻開始播放");});audio.addEventListener("pause", function() {console.log("音頻已暫停");});audio.addEventListener("ended", function() {console.log("音頻播放結束");alert("音頻播放完畢！");});audio.addEventListener("timeupdate", function() {const currentTime = Math.floor(this.currentTime);const duration = Math.floor(this.duration);console.log(`播放進度：${currentTime}/${duration}秒`);});audio.addEventListener("volumechange", function() {console.log(`音量：${Math.floor(this.volume * 100)}%`);});
</script>

4.9 其他常用事件

事件描述
hashchange當URL的錨部分（hash）發生變化時觸發
popstate當用戶導航會話歷史時觸發（前進、后退按鈕）
storage當Web Storage（localStorage或sessionStorage）中的數據發生變化時觸發
animationstart, animationend, animationiterationCSS動畫相關事件
transitionstart, transitionend, transitioncancelCSS過渡相關事件

示例：

<!-- hashchange事件示例 -->
<a href="#section1">跳轉到第一節</a>
<a href="#section2">跳轉到第二節</a><div id="section1" style="height: 1000px; border: 1px solid black;">第一節</div>
<div id="section2" style="height: 1000px; border: 1px solid black;">第二節</div><script>window.addEventListener("hashchange", function() {console.log("當前錨點：" + window.location.hash);});// storage事件示例localStorage.setItem("test", "value");window.addEventListener("storage", function(event) {console.log(`存儲鍵${event.key}的值從${event.oldValue}變為${event.newValue}`);});
</script>

5. 事件冒泡和捕獲

HTML DOM事件模型包括三個階段：捕獲階段、目標階段和冒泡階段。

5.1 事件冒泡

事件冒泡是指事件從觸發它的最內層元素開始，然后逐級向上傳播到DOM樹的頂層元素（document對象）。

示例：

<div id="outer" style="padding: 50px; background-color: lightblue;"><div id="middle" style="padding: 50px; background-color: lightgreen;"><div id="inner" style="padding: 50px; background-color: lightyellow;">點擊我</div></div>
</div><script>document.getElementById("outer").addEventListener("click", function() {console.log("外層div被點擊");});document.getElementById("middle").addEventListener("click", function() {console.log("中層div被點擊");});document.getElementById("inner").addEventListener("click", function() {console.log("內層div被點擊");});// 點擊內層div，輸出順序：// 內層div被點擊// 中層div被點擊// 外層div被點擊
</script>

5.2 事件捕獲

事件捕獲與事件冒泡相反，事件從DOM樹的頂層元素開始，然后逐級向下傳播到觸發它的最內層元素。

示例：

<div id="outer" style="padding: 50px; background-color: lightblue;"><div id="middle" style="padding: 50px; background-color: lightgreen;"><div id="inner" style="padding: 50px; background-color: lightyellow;">點擊我</div></div>
</div><script>document.getElementById("outer").addEventListener("click", function() {console.log("外層div被點擊（捕獲階段）");}, true); // 第三個參數設為true表示在捕獲階段觸發document.getElementById("middle").addEventListener("click", function() {console.log("中層div被點擊（捕獲階段）");}, true);document.getElementById("inner").addEventListener("click", function() {console.log("內層div被點擊（捕獲階段）");}, true);// 點擊內層div，輸出順序：// 外層div被點擊（捕獲階段）// 中層div被點擊（捕獲階段）// 內層div被點擊（捕獲階段）
</script>

5.3 阻止事件傳播

可以使用stopPropagation()方法阻止事件繼續傳播（無論是冒泡還是捕獲）。

示例：

<div id="outer" style="padding: 50px; background-color: lightblue;"><div id="middle" style="padding: 50px; background-color: lightgreen;"><div id="inner" style="padding: 50px; background-color: lightyellow;">點擊我</div></div>
</div><script>document.getElementById("outer").addEventListener("click", function() {console.log("外層div被點擊");});document.getElementById("middle").addEventListener("click", function(event) {event.stopPropagation(); // 阻止事件冒泡console.log("中層div被點擊，事件傳播已阻止");});document.getElementById("inner").addEventListener("click", function() {console.log("內層div被點擊");});// 點擊內層div，輸出順序：// 內層div被點擊// 中層div被點擊，事件傳播已阻止// （外層div不會收到事件）
</script>

6. 事件委托

事件委托是一種優化技術，利用事件冒泡的特性，將事件監聽器添加到父元素上，而不是為每個子元素單獨添加監聽器。

優勢

  • 減少內存使用，提高性能
  • 動態添加的子元素也能觸發事件
  • 簡化事件管理

示例：

<ul id="myList"><li>項目1</li><li>項目2</li><li>項目3</li>
</ul>
<button id="addItem">添加項目</button><script>const list = document.getElementById("myList");const addButton = document.getElementById("addItem");let counter = 3;// 使用事件委托，將監聽器添加到父元素ul上list.addEventListener("click", function(event) {// 檢查點擊的是否是li元素if (event.target.tagName === "LI") {alert("點擊了：" + event.target.textContent);}});// 動態添加新的li元素addButton.addEventListener("click", function() {counter++;const newLi = document.createElement("li");newLi.textContent = "項目" + counter;list.appendChild(newLi);});
</script>

7. 自定義事件

除了使用瀏覽器內置的事件類型，還可以創建和觸發自定義事件，用于組件間通信或實現特定的業務邏輯。

創建和觸發自定義事件

語法：

// 創建自定義事件
const customEvent = new CustomEvent('eventName', {detail: {/* 傳遞的自定義數據 */},bubbles: true, // 是否冒泡cancelable: true // 是否可取消
});// 觸發自定義事件
element.dispatchEvent(customEvent);

示例：

<div id="myElement" style="padding: 20px; background-color: lightblue;">監聽自定義事件
</div>
<button id="triggerEvent">觸發自定義事件</button><script>const element = document.getElementById("myElement");const triggerButton = document.getElementById("triggerEvent");// 監聽自定義事件element.addEventListener("myCustomEvent", function(event) {console.log("收到自定義事件");console.log("事件數據：", event.detail);alert("自定義事件被觸發：" + event.detail.message);});// 觸發自定義事件triggerButton.addEventListener("click", function() {const customEvent = new CustomEvent("myCustomEvent", {detail: {message: "這是一個自定義事件",timestamp: new Date().getTime()},bubbles: true,cancelable: true});element.dispatchEvent(customEvent);});
</script>

8. HTML事件最佳實踐

8.1 性能優化

  • 使用事件委托減少事件監聽器的數量
  • 避免在高頻率觸發的事件（如mousemove、scroll）中執行復雜操作
  • 使用節流（throttle）和防抖（debounce）技術優化高頻率事件
  • 移除不再需要的事件監聽器，避免內存泄漏

節流和防抖示例：

// 節流函數：限制事件觸發頻率
function throttle(func, limit) {let inThrottle;return function() {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};
}// 防抖函數：在事件停止觸發后才執行
function debounce(func, delay) {let timeoutId;return function() {const args = arguments;const context = this;clearTimeout(timeoutId);timeoutId = setTimeout(() => func.apply(context, args), delay);};
}// 使用示例
window.addEventListener('resize', throttle(function() {console.log('窗口大小改變了（節流后）');
}, 200));input.addEventListener('input', debounce(function() {console.log('輸入停止了（防抖后）');
}, 500));

8.2 代碼組織

  • 將事件處理邏輯與HTML結構分離
  • 使用命名函數而不是匿名函數作為事件處理器，方便調試和移除
  • 封裝事件處理邏輯，提高代碼復用性
  • 使用模塊化的方式組織事件處理代碼

8.3 可訪問性

  • 確保所有交互元素都能通過鍵盤訪問和操作
  • 為鼠標事件提供等效的鍵盤事件處理
  • 避免完全依賴鼠標特定事件（如mouseover）
  • 使用語義化的HTML元素，它們通常具有內置的可訪問性特性

8.4 安全性

  • 驗證和清理用戶輸入，防止XSS攻擊
  • 避免在事件處理器中使用eval()等危險函數
  • 使用event.isTrusted檢查事件是否由用戶觸發，而非腳本
  • 限制事件處理器的權限，最小化潛在風險

9. 常見問題及解決方案

9.1 事件沒有觸發

  • 檢查元素是否正確選擇（使用console.log驗證）
  • 確認事件監聽器是否正確添加（沒有語法錯誤）
  • 檢查是否有其他代碼阻止了事件傳播或默認行為
  • 對于動態添加的元素，確保在元素創建后再添加事件監聽器，或使用事件委托

9.2 事件重復觸發

  • 檢查是否多次添加了相同的事件監聽器
  • 使用事件委托替代為每個元素單獨添加監聽器
  • 在適當的時候移除不再需要的事件監聽器

9.3 事件順序問題

  • 了解事件冒泡和捕獲的工作原理
  • 使用stopPropagation()控制事件傳播
  • 注意不同類型事件之間的觸發順序（如mousedown先于click）

9.4 移動設備上的觸摸事件問題

  • 注意觸摸事件和鼠標事件的區別
  • 使用touch-actionCSS屬性控制觸摸行為
  • 考慮使用手勢庫（如Hammer.js）簡化復雜手勢處理
  • 記得在touchmove事件中使用preventDefault()阻止默認滾動行為

10. 擴展學習資源

  • MDN Web Docs 事件參考：https://developer.mozilla.org/zh-CN/docs/Web/Events
  • W3Schools HTML DOM 事件：https://www.w3schools.com/js/js_htmldom_events.asp
  • JavaScript 高級程序設計（第4版）：深入理解JavaScript事件系統
  • JavaScript 事件委托詳解：https://www.ruanyifeng.com/blog/2018/07/event-delegation.html
  • 現代 JavaScript 教程 - 事件：https://zh.javascript.info/events

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

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

相關文章

Kafka面試精講 Day 10：事務機制與冪等性保證

Kafka面試精講 Day 10：事務機制與冪等性保證

【Kafka面試精講 Day 10】事務機制與冪等性保證 在分布式消息系統中&#xff0c;如何確保消息不丟失、不重復&#xff0c;是系統可靠性的核心挑戰。Kafka自0.11版本起引入了冪等性Producer和事務性消息機制&#xff0c;徹底解決了“至少一次”語義下可能產生的重復消息問題&am…
閱讀更多...
時序數據庫簡介和安裝

時序數據庫簡介和安裝

一、簡介1. 什么是時序數據庫&#xff1f;時序數據庫是專門用于存儲和處理時間序列數據的數據庫系統。時間序列數據是指按時間順序索引的一系列數據點。每個數據點都包含&#xff1a;一個時間戳&#xff1a;記錄數據產生的時間。一個或多個指標值&#xff1a;例如溫度、濕度、C…
閱讀更多...
comfyUI 暴露網絡restful http接口

comfyUI 暴露網絡restful http接口

https://zhuanlan.zhihu.com/p/686893291 暴露websocket接口。 打開開發者選項 如圖
閱讀更多...
linux系統address already in use問題解決

linux系統address already in use問題解決

linux系統上某個端口被占用&#xff0c;如何解決&#xff1f;1.找到占用的進程編號&#xff1a;netstat -tulnp | grep :80002.強制殺死該進程kill -9 80603其他說明&#xff1a;1.查找占用端口的進程&#xff0c;可以用&#xff1a;lsof -i :8001 # 或者使用 netstat -tulnp |…
閱讀更多...
基于SpringBoot的家政保潔預約系統【計算機畢業設計選題 計算機畢業設計項目 計算機畢業論文題目推薦】

基于SpringBoot的家政保潔預約系統【計算機畢業設計選題 計算機畢業設計項目 計算機畢業論文題目推薦】

&#x1f34a;作者&#xff1a;計算機編程-吉哥 &#x1f34a;簡介&#xff1a;專業從事JavaWeb程序開發&#xff0c;微信小程序開發&#xff0c;定制化項目、 源碼、代碼講解、文檔撰寫、ppt制作。做自己喜歡的事&#xff0c;生活就是快樂的。 &#x1f34a;心愿&#xff1a;點…
閱讀更多...
【Linux系統】 4. 權限（一）

【Linux系統】 4. 權限（一）

一. shell 命令及運行原理基本理解1&#xff09;廣義理解的操作系統包括&#xff1a;操作系統內核、外殼程序&#xff08;shell命令行、圖形化界面&#xff09;、必要的軟件。2&#xff09;狹義的操作系統&#xff1a;操作系統內核。3&#xff09;在用戶和內核之間有一個外殼程…
閱讀更多...
6.python——字符串

6.python——字符串

python中用’ 和" "創建字符串 python的子字符串截取用[]取字符串拼接可以直接用相加。 python三引號允許一個字符串跨多行&#xff0c;其中無需進行轉義&#xff08;所見即所得&#xff09;。 當你需要一塊HTML或者SQL時&#xff0c;這時用字符串組合&#xff0c;特…
閱讀更多...
足球數據API接口的技術特性與應用價值分析

足球數據API接口的技術特性與應用價值分析

一、接口概述現代足球數據接口是基于RESTful架構的數據服務&#xff0c;通過標準化方式提供賽事相關信息。這類接口通常采用JSON格式傳輸數據&#xff0c;支持跨平臺調用&#xff0c;為開發者提供結構化的足球賽事數據。二、數據覆蓋范圍主流足球數據接口通常包含以下數據類型&…
閱讀更多...
＜android＞反編譯魔改安卓系統應用并替換

＜android＞反編譯魔改安卓系統應用并替換

我們知道安卓系統基于穩定性、維護便利、性能優化等原因并未對原生系統apk進行混淆加密處理&#xff0c;由此就方便了我們反編譯替換原生應用。 首先我們設備需要是root后的&#xff0c;我是使用的是小米5&#xff0c;刷的24.3版本的面具。首先我們需要取系統apk&#xff0c;這…
閱讀更多...
【Qt】項目的創建 and 各個控件的使用

【Qt】項目的創建 and 各個控件的使用

一、項目的創建&#x1f50d;然后點擊新建項目。&#x1f4d6;注意&#xff1a;路徑不要帶有中文&#xff0c;不然運行不了代碼。&#x1f4d6;qmake是一個構建工具&#xff0c;在 Qt 寫的程序&#xff0c;設計的到一系列的 "元編程" 技術&#xff0c;什么是元編程技…
閱讀更多...
大模型架構演進全景：從Transformer到下一代智能系統的技術路徑（MoE、Mamba/SSM、混合架構）

大模型架構演進全景：從Transformer到下一代智能系統的技術路徑（MoE、Mamba/SSM、混合架構）

當前大模型發展正經歷著一個關鍵的技術分水嶺。雖然Transformer架構自2017年問世以來主導了整個AI領域&#xff0c;但我們正見證著多種創新架構的涌現&#xff0c;每種都在試圖解決Transformer的固有局限。本指南將系統性地解析當前主流架構的技術原理、適用場景與發展趨勢&…
閱讀更多...
畫世界筆刷合集（2000 + 款）：含宮崎駿森系、鴨風人像、國潮等多風格 + 視頻導入教程

畫世界筆刷合集（2000 + 款）：含宮崎駿森系、鴨風人像、國潮等多風格 + 視頻導入教程

預覽&#xff1a; https://blog.csdn.net/2501_93092597/article/details/151330089?spm1011.2415.3001.5331 想在畫世界創作卻缺適配筆刷&#xff1f;手動繪制森系元素、人像細節耗時久&#xff0c;導入筆刷總失敗&#xff0c;找配套背景 / 配色還得跨平臺搜索&#xff1f;這…
閱讀更多...
03-Redis 安裝指南：從版本選擇到多系統部署（Windows+macOS+Linux）

03-Redis 安裝指南：從版本選擇到多系統部署（Windows+macOS+Linux）

目錄引言一、安裝 Redis 前必須明確的核心問題二、Redis 版本選擇&#xff1a;穩定版 vs 開發版&#xff0c;該怎么選&#xff1f;2.1 版本規則&#xff1a;看 “次版本號” 辨穩定性2.2 穩定版與開發版核心差異2.3 版本選擇建議三、多系統安裝教程&#xff1a;step-by-step 實…
閱讀更多...
普通MYSQL數據庫是怎么做sum操作的

普通MYSQL數據庫是怎么做sum操作的

MySQL 的 SUM()操作實現是一個結合??執行引擎優化、存儲結構利用和分組算法??的高效過程。以下是其核心實現機制和優化策略&#xff1a;??1. 執行流程概覽??以查詢為例&#xff1a;SELECT department, SUM(salary) FROM employees GROUP BY department;??執行步驟??…
閱讀更多...
Claude-Flow AI協同開發：基礎入門之 AI編排

Claude-Flow AI協同開發：基礎入門之 AI編排

1.1 引言&#xff1a;超越“代碼生成器”的革命 在AI輔助開發的浪潮中&#xff0c;我們已經習慣了代碼補全、函數生成等“代碼生成器”工具。它們極大地提升了我們的編碼效率&#xff0c;但通常僅限于解決孤立、單一的問題。當面對一個完整的項目或一個復雜的功能模塊時&#x…
閱讀更多...
Linux中下載安裝部署Redis7.4.5——并設置用戶名、密碼及其授權的保姆級教程

Linux中下載安裝部署Redis7.4.5——并設置用戶名、密碼及其授權的保姆級教程

一、環境準備 環境準備 序號 說明 1 使?RHEL9或Almalinux9.1及其更高版本系統 #查看系統信息 cat /etc/os-release 2 Linux中需要Redis源碼編譯所需的gcc依賴 #1-檢查是否已
閱讀更多...
健康度——設備健康續航條

健康度——設備健康續航條

在故障診斷與健康管理&#xff08;PHM&#xff09;領域和壽命預測領域中&#xff0c;健康度&#xff08;Health Index, HI&#xff09;是一個至關重要的概念&#xff0c;它旨在量化設備或系統的當前健康狀態&#xff0c;并為預測其剩余使用壽命&#xff08;Remaining Useful Li…
閱讀更多...
【Python - 類庫 - BeautifulSoup】（02）使用“BeautifulSoup“按類名獲取內容

【Python - 類庫 - BeautifulSoup】（02）使用“BeautifulSoup“按類名獲取內容

使用BeautifulSoup按類名獲取內容 在本文中&#xff0c;我們將介紹如何使用BeautifulSoup按類名獲取內容的方法。BeautifulSoup是一個用于解析HTML和XML文檔的Python庫。它可以方便地遍歷和搜索文檔樹&#xff0c;使得我們能夠輕松地提取想要的信息。 安裝BeautifulSoup 首先&a…
閱讀更多...
36.Java序列化與反序列化是什么

36.Java序列化與反序列化是什么

36.Java序列化與反序列化是什么 序列化就是把Java對象轉換成字節流&#xff08;二進制&#xff09;。 把對象保存到本地文件或網絡傳輸。因為Java對象在JVM的堆內存中&#xff0c;JVM堆不存在了&#xff0c;對象也就不在了。 反序列化就是把字節流轉換為對象 從文件或者網絡里獲…
閱讀更多...
c#泛型公共類示例

c#泛型公共類示例

在C#中&#xff0c;泛型類是一種可以操作多種數據類型的類。這使得你可以編寫更靈活、可重用的代碼。泛型類通過在類名后使用尖括號<>和類型參數來定義。類型參數可以是具體的類型&#xff0c;如int或string&#xff0c;也可以是其他泛型類型&#xff0c;甚至是其他泛型類…
閱讀更多...
最新文章

Copyright @ 2022~2023