JavaScript常用事件大全：從基礎到實戰應用

作者：web前端開發 2025-09-05 09:40:04

JavaScript事件是網頁交互的核心。本文將全面介紹常用事件類型及其實際應用場景，幫助開發者快速掌握事件處理技巧。

一、鼠標事件（8種核心操作）

事件名稱	觸發時機	使用示例
click	鼠標單擊元素時觸發	按鈕操作
dblclick	鼠標雙擊元素時觸發	文件打開
mousedown	鼠標按鍵按下瞬間觸發	拖拽開始
mouseup	松開鼠標按鍵時觸發	拖拽結束
mouseover	鼠標移入元素區域時觸發	菜單展開
mousemove	鼠標在元素內移動時持續觸發	繪圖工具
mouseout	鼠標移出元素區域時觸發	提示隱藏
mouseenter	鼠標進入元素時觸發（不冒泡）	動畫開始

實際應用技巧：

// 實現簡單繪圖板
const canvas = document.getElementById('drawing-board');
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

二、鍵盤事件（3種輸入狀態）

事件名稱	觸發時機
keydown	鍵盤按鍵按下瞬間觸發
keyup	松開鍵盤按鍵時觸發
keypress	按住按鍵持續觸發（已廢棄）

注意： 現代開發建議優先使用 keydown + keyup 組合

三、頁面生命周期事件（6個關鍵節點）

window.addEventListener('load', () => {
// 頁面完全加載后執行（包括圖片）
});

window.addEventListener('domContentLoaded', () => {
// DOM解析完成時執行（無需等待資源）
});

window.addEventListener('beforeunload', (e) => {
// 頁面關閉前提醒用戶保存數據
  e.preventDefault();
return (e.returnValue = '確定離開嗎？');
});

window.addEventListener('resize', () => {
// 窗口大小變化時適配布局
});

window.addEventListener('scroll', () => {
// 滾動時實現吸頂效果
});

四、表單事件（5種交互狀態）

focus：輸入框獲得焦點（如顯示歷史記錄）
blur：輸入框失去焦點（如驗證格式）
change：值改變且失去焦點后（適合下拉菜單）
input：在實時變化時觸發（推薦替代keypress）
submit：表單提交前驗證（必須阻止默認行為）

驗證代碼示例：

document.getElementById('email').addEventListener('blur', function() {
if (!this.value.includes('@')) {
this.style.borderColor = 'red';
  }
});

五、現代事件類型（必學7種）

touchstart/touchend：移動端觸摸事件
transitionend：css動畫結束時觸發
visibilitychange：標簽頁切換時處理
contextmenu：右鍵菜單自定義（需阻止默認）
paste：粘貼板數據處理
fullscreenchange：全屏模式切換
online/offline：網絡狀態檢測

六、高級事件處理技巧

事件委托： 動態元素處理終極方案

// 統一處理表格按鈕
document.querySelector('#>).addEventListener('click', e => {
if (e.target.classList.contains('delete-btn')) {
deleteRecord(e.target.dataset.id);
  }
});

性能優化：滾動事件

// 滾動事件節流處理
let isScrolling;
window.addEventListener('scroll', () => {
clearTimeout(isScrolling);
  isScrolling = setTimeout(() => {
// 實際執行的操作
  }, 100);
});

自定義事件： 實現組件通信

// 創建事件
const refreshEvent = new Event('dataRefresh');

// 觸發事件
document.dispatchEvent(refreshEvent);

// 監聽事件
document.addEventListener('dataRefresh', loadData);

實戰建議（提升代碼質量）

優先使用 addEventListener 替代 on* 屬性
移動端務必添加 touch 事件支持
表單驗證使用 input + blur 組合
頁面卸載前使用 beforeunload 保存數據
高頻事件（resize/scroll）必須做節流處理

根據MDN官方數據，現代瀏覽器對標準事件的兼容性已達98%以上（IE11除外），開發者可放心使用。

掌握這些事件機制，能顯著提升用戶交互體驗。建議在實際項目中多練習事件委托和自定義事件的使用，這是構建復雜應用的關鍵技術。

責任編輯：龐桂玉來源： web前端開發

JavaScript 前端開發者