鼠標(biāo)事件

click 事件

觸發(fā)條件

• 鼠標(biāo)左鍵按下并釋放在同一元素上

• 觸摸設(shè)備上手指觸摸并釋放

• 鍵盤回車或空格鍵（在可聚焦元素上）

• 調(diào)用元素的 .click() 方法

當(dāng)用戶點(diǎn)擊元素時(shí)觸發(fā)：

document.getElementById("myButton").addEventListener("click", function() {
  alert("按鈕被點(diǎn)擊了！");
});

dblclick 事件

觸發(fā)流程

雙擊完整事件流：
1. 第一次點(diǎn)擊：
   mousedown → mouseup → click
2. 第二次點(diǎn)擊（在時(shí)間窗口內(nèi)）：
   mousedown → mouseup → click → dblclick

注意：雙擊會觸發(fā)兩次完整的單擊流程

雙擊元素時(shí)觸發(fā)：

document.getElementById("myBox").addEventListener("dblclick", function() {
  this.style.backgroundColor = "red";
});

mouseover/mouseout 事件

• mouseover: 鼠標(biāo)指針進(jìn)入元素或其子元素時(shí)觸發(fā)
• mouseout:  鼠標(biāo)指針離開元素或其子元素時(shí)觸發(fā)

關(guān)鍵特性：
1. 支持事件冒泡
2. 涉及子元素時(shí)會頻繁觸發(fā)
3. 適合需要精細(xì)控制的懸停交互

鼠標(biāo)移入/移出元素時(shí)觸發(fā)：

document.getElementById("hoverArea").addEventListener("mouseover", function() {
  this.textContent = "鼠標(biāo)進(jìn)來了";
});
 
document.getElementById("hoverArea").addEventListener("mouseout", function() {
  this.textContent = "鼠標(biāo)出去了";
});

鍵盤事件

keydown 事件

keydown: 按下任意鍵盤鍵時(shí)觸發(fā)（包括功能鍵、組合鍵）
觸發(fā)流程：
1. 物理按下鍵盤鍵
2. keydown 事件觸發(fā)
3. 如果產(chǎn)生字符：keypress 事件（已廢棄）
4. 釋放按鍵：keyup 事件

重復(fù)觸發(fā)：

如果按住不放，keydown 會以系統(tǒng)重復(fù)速率連續(xù)觸發(fā)

（可通過操作系統(tǒng)設(shè)置調(diào)整重復(fù)延遲和速率）

按下鍵盤任意鍵時(shí)觸發(fā)：

document.addEventListener("keydown", function(event) {
  console.log("按下的鍵碼是: " + event.keyCode);
});

keyup 事件

釋放鍵盤按鍵時(shí)觸發(fā)：

document.getElementById("textInput").addEventListener("keyup", function(event) {
  console.log("輸入的內(nèi)容: " + this.value);
});

表單事件

submit 事件

submit 事件的發(fā)途徑：
1. 用戶點(diǎn)擊 type="submit" 的按鈕或 input
2. 用戶點(diǎn)擊 type="image" 的圖片提交按鈕
3. 在表單內(nèi)按 Enter 鍵（單行輸入時(shí)）
4. 調(diào)用 form.submit() 方法（不會觸發(fā) submit 事件?。?br />5. 調(diào)用 form.requestSubmit() 方法（會觸發(fā) submit 事件）

關(guān)鍵區(qū)別：

- form.submit() → 直接提交，不觸發(fā)事件

- form.requestSubmit() → 模擬用戶提交，觸發(fā)事件

表單提交時(shí)觸發(fā)：

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  alert("表單已阻止默認(rèn)提交！");
});

change 事件

change 事件的觸發(fā)時(shí)機(jī)取決于表單元素類型：

文本輸入類（input type="text|email|password|search|tel|url"）：
1. 值發(fā)生變化
2. 元素失去焦點(diǎn)（blur）后觸發(fā)

選擇類（input type="checkbox|radio"）：
1. 選中狀態(tài)改變時(shí)立即觸發(fā)
2. 點(diǎn)擊或切換時(shí)立即觸發(fā)

下拉選擇（select）：
1. 選擇選項(xiàng)改變時(shí)立即觸發(fā)
2. 無論是通過鼠標(biāo)、鍵盤還是程序修改

文件選擇（input type="file"）：
1. 用戶選擇文件后立即觸發(fā)
2. 文件列表發(fā)生變化時(shí)觸發(fā)

范圍選擇（input type="range"）：
1. 值改變并釋放鼠標(biāo)時(shí)觸發(fā)
2. 拖動過程中不觸發(fā)，釋放時(shí)才觸發(fā)

日期時(shí)間類（input type="date|time|datetime-local|month|week"）：
1. 選擇新值后立即觸發(fā)
2. 通常是確認(rèn)選擇后觸發(fā)

關(guān)鍵特性：change 事件不一定實(shí)時(shí)觸發(fā)，有延遲性

表單元素值改變時(shí)觸發(fā)（如輸入框、下拉框）：

document.getElementById("colorSelect").addEventListener("change", function() {
  console.log("選中的顏色: " + this.value);
});

focus/blur 事件

元素獲得/失去焦點(diǎn)時(shí)觸發(fā)：

document.getElementById("emailInput").addEventListener("focus", function() {
  this.placeholder = "";
});
 
document.getElementById("emailInput").addEventListener("blur", function() {
  this.placeholder = "請輸入郵箱";
});

窗口事件

load 事件

頁面或資源加載完成時(shí)觸發(fā)：

window.addEventListener("load", function() {
  console.log("頁面加載完畢");
});

resize 事件

窗口大小改變時(shí)觸發(fā)：

window.addEventListener("resize", function() {
  console.log("窗口尺寸: " + window.innerWidth + "x" + window.innerHeight);
});

scroll 事件

滾動頁面時(shí)觸發(fā)：

window.addEventListener("scroll", function() {
  console.log("當(dāng)前滾動位置: " + window.pageYOffset);
});

觸摸事件（移動端）

touchstart 事件

手指觸摸屏幕時(shí)觸發(fā)：

document.getElementById("touchArea").addEventListener("touchstart", function() {
  this.style.backgroundColor = "blue";
});

touchend 事件

手指離開屏幕時(shí)觸發(fā)：

document.getElementById("touchArea").addEventListener("touchend", function() {
  this.style.backgroundColor = "white";
});

自定義事件

通過 CustomEvent 創(chuàng)建和觸發(fā)自定義事件：

const event = new CustomEvent("myEvent", {
  detail: { message: "這是自定義數(shù)據(jù)" }
});
 
document.addEventListener("myEvent", function(e) {
  console.log(e.detail.message); // 輸出：這是自定義數(shù)據(jù)
});
 
// 觸發(fā)事件
document.dispatchEvent(event);

事件是 JavaScript 實(shí)現(xiàn)交互的核心機(jī)制，它連接了用戶操作、瀏覽器行為與腳本邏輯。本文將系統(tǒng)梳理事件分類、深入解析事件機(jī)制、補(bǔ)充高階用法，并結(jié)合開發(fā)實(shí)踐給出優(yōu)化方案，幫助開發(fā)者編寫更健壯、高效的交互代碼。

一、 核心事件分類及詳細(xì)說明

JavaScript 事件覆蓋了用戶交互、資源加載、狀態(tài)變化等多個維度，按觸發(fā)場景可分為以下大類，部分事件補(bǔ)充了適用場景與使用細(xì)節(jié)：

1. 鼠標(biāo)事件

鼠標(biāo)事件是桌面端交互的基礎(chǔ)，需重點(diǎn)區(qū)分冒泡與非冒泡、元素自身與子元素觸發(fā)的差異。

2. 鍵盤事件

鍵盤事件用于捕獲鍵盤操作，需注意事件觸發(fā)順序與鍵值判斷邏輯。

關(guān)鍵屬性：

• key：返回按鍵的名稱（如 Enter、a）
• code：返回按鍵的物理位置（如 KeyA、Enter）
• ctrlKey/shiftKey/altKey：判斷是否同時(shí)按下修飾鍵

3. 表單事件

表單事件聚焦于表單元素的狀態(tài)變化，是處理用戶輸入的核心

4. 窗口 / 文檔事件

這類事件與瀏覽器窗口、文檔加載狀態(tài)強(qiáng)相關(guān)，是控制頁面生命周期的關(guān)鍵。

5. 拖放事件

拖放事件實(shí)現(xiàn)元素的拖拽交互，需配合 draggable="true" 屬性使用。

二、 事件機(jī)制深度解析

要掌握事件處理，必須理解事件流、事件對象、事件委托這三大核心概念。

1. 事件流的三個階段

事件流描述了事件在 DOM 樹中的傳播路徑，分為三個階段，順序不可逆：

1. 捕獲階段（Capture Phase）

   • 順序：從 window 向下傳播到目標(biāo)元素的父元素
   • 觸發(fā)時(shí)機(jī)：事件到達(dá)目標(biāo)元素之前
   • 開啟方式：addEventListener 第三個參數(shù)設(shè)為 true

2. 目標(biāo)階段（Target Phase）

   • 順序：事件到達(dá)實(shí)際觸發(fā)的元素
   • 觸發(fā)時(shí)機(jī)：捕獲階段結(jié)束后，冒泡階段開始前
   • 特點(diǎn)：此時(shí) event.eventPhase === 2，事件處理順序由綁定順序決定

3. 冒泡階段（Bubble Phase）

   • 順序：從目標(biāo)元素向上傳播到 window
   • 觸發(fā)時(shí)機(jī)：目標(biāo)階段結(jié)束后
   • 特點(diǎn)：addEventListener 默認(rèn)在該階段觸發(fā)（第三個參數(shù)為 false）

關(guān)鍵方法：

• event.stopPropagation()：阻止事件繼續(xù)傳播（捕獲 / 冒泡）
• event.stopImmediatePropagation()：阻止事件傳播 + 阻止當(dāng)前元素后續(xù)的監(jiān)聽器執(zhí)行

2. 事件對象（Event）核心屬性

事件對象是事件處理函數(shù)的唯一參數(shù)，包含了事件的所有關(guān)鍵信息，補(bǔ)充高頻屬性如下：

3. 事件委托（Event Delegation）

核心原理：利用事件冒泡機(jī)制，在父元素上綁定一個監(jiān)聽器，處理所有子元素的事件。適用場景：

• 動態(tài)添加的子元素（如列表新增項(xiàng)）
• 大量同類子元素（如表格單元格）

• 優(yōu)勢：

• 減少事件監(jiān)聽器數(shù)量，降低內(nèi)存占用
• 無需為動態(tài)元素重復(fù)綁定事件
• 簡化代碼維護(hù)

二、 框架中的事件處理差異

在 React、Vue 等框架中，事件系統(tǒng)基于原生事件封裝，存在以下差異：

1. React 合成事件
   • 所有事件綁定到 document 上，通過事件委托實(shí)現(xiàn)
   • 需使用 e.nativeEvent 獲取原生事件對象
   • 組件卸載時(shí)自動移除監(jiān)聽器
2. Vue 事件
   • 支持原生事件和自定義事件（$emit/v-on）
   • 自定義事件不冒泡，需使用 .native 修飾符監(jiān)聽原生事件
3. Angular 事件
   • 使用 (event) 語法綁定，支持事件過濾
   • 內(nèi)置 HostListener 裝飾器監(jiān)聽宿主元素事件

三、 事件調(diào)試與監(jiān)控技巧

1. 瀏覽器開發(fā)者工具
   • Elements → Event Listeners：查看元素綁定的所有監(jiān)聽器
   • Sources → Event Listener Breakpoints：按事件類型打斷點(diǎn)
2. 性能監(jiān)控
   • 使用 Performance 面板錄制事件觸發(fā)過程，分析耗時(shí)
   • 監(jiān)控高頻事件觸發(fā)頻率，避免過度渲染
3. 錯誤捕獲
   • 使用 window.onerror 捕獲事件處理函數(shù)中的運(yùn)行時(shí)錯誤
   • 使用 window.addEventListener('unhandledrejection') 捕獲 Promise 錯誤

總結(jié)

JavaScript 事件是前端交互的基石，掌握事件分類、事件流機(jī)制和優(yōu)化方案，是編寫高性能、可維護(hù)代碼的關(guān)鍵。開發(fā)中需結(jié)合業(yè)務(wù)場景，合理選擇事件類型，善用事件委托和節(jié)流防抖，同時(shí)兼顧兼容性與無障礙訪問，才能構(gòu)建出優(yōu)質(zhì)的交互體驗(yàn)。

到此這篇關(guān)于JavaScript常用事件的文章就介紹到這了,更多相關(guān)js常用事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論