JavaScript常用事件大全：從基礎(chǔ)到實戰(zhàn)應(yīng)用
作者：web前端開發(fā)
JavaScript事件是網(wǎng)頁交互的核心。本文將全面介紹常用事件類型及其實際應(yīng)用場景，幫助開發(fā)者快速掌握事件處理技巧。
JavaScript事件是網(wǎng)頁交互的核心。本文將全面介紹常用事件類型及其實際應(yīng)用場景，幫助開發(fā)者快速掌握事件處理技巧。
一、鼠標(biāo)事件（8種核心操作）
事件名稱 | 觸發(fā)時機(jī) | 使用示例 |
click | 鼠標(biāo)單擊元素時觸發(fā) | 按鈕操作 |
dblclick | 鼠標(biāo)雙擊元素時觸發(fā) | 文件打開 |
mousedown | 鼠標(biāo)按鍵按下瞬間觸發(fā) | 拖拽開始 |
mouseup | 松開鼠標(biāo)按鍵時觸發(fā) | 拖拽結(jié)束 |
mouseover | 鼠標(biāo)移入元素區(qū)域時觸發(fā) | 菜單展開 |
mousemove | 鼠標(biāo)在元素內(nèi)移動時持續(xù)觸發(fā) | 繪圖工具 |
mouseout | 鼠標(biāo)移出元素區(qū)域時觸發(fā) | 提示隱藏 |
mouseenter | 鼠標(biāo)進(jìn)入元素時觸發(fā)（不冒泡） | 動畫開始 |
實際應(yīng)用技巧：
// 實現(xiàn)簡單繪圖板
const canvas = document.getElementById('drawing-board');
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);二、鍵盤事件（3種輸入狀態(tài)）
事件名稱 | 觸發(fā)時機(jī) |
keydown | 鍵盤按鍵按下瞬間觸發(fā) |
keyup | 松開鍵盤按鍵時觸發(fā) |
keypress | 按住按鍵持續(xù)觸發(fā)（已廢棄） |
注意： 現(xiàn)代開發(fā)建議優(yōu)先使用 keydown + keyup 組合
三、頁面生命周期事件（6個關(guān)鍵節(jié)點）
window.addEventListener('load', () => {
// 頁面完全加載后執(zhí)行（包括圖片）
});
window.addEventListener('domContentLoaded', () => {
// DOM解析完成時執(zhí)行（無需等待資源）
});
window.addEventListener('beforeunload', (e) => {
// 頁面關(guān)閉前提醒用戶保存數(shù)據(jù)
e.preventDefault();
return (e.returnValue = '確定離開嗎？');
});
window.addEventListener('resize', () => {
// 窗口大小變化時適配布局
});
window.addEventListener('scroll', () => {
// 滾動時實現(xiàn)吸頂效果
});四、表單事件（5種交互狀態(tài)）
- focus：輸入框獲得焦點（如顯示歷史記錄）
- blur：輸入框失去焦點（如驗證格式）
- change：值改變且失去焦點后（適合下拉菜單）
- input：在實時變化時觸發(fā)（推薦替代keypress）
- submit：表單提交前驗證（必須阻止默認(rèn)行為）
驗證代碼示例：
document.getElementById('email').addEventListener('blur', function() {
if (!this.value.includes('@')) {
this.style.borderColor = 'red';
}
});五、現(xiàn)代事件類型（必學(xué)7種）
- touchstart/touchend：移動端觸摸事件
- transitionend：css動畫結(jié)束時觸發(fā)
- visibilitychange：標(biāo)簽頁切換時處理
- contextmenu：右鍵菜單自定義（需阻止默認(rèn)）
- paste：粘貼板數(shù)據(jù)處理
- fullscreenchange：全屏模式切換
- online/offline：網(wǎng)絡(luò)狀態(tài)檢測
六、高級事件處理技巧
- 事件委托： 動態(tài)元素處理終極方案
// 統(tǒng)一處理表格按鈕
document.querySelector('#>).addEventListener('click', e => {
if (e.target.classList.contains('delete-btn')) {
deleteRecord(e.target.dataset.id);
}
});- 性能優(yōu)化：滾動事件
// 滾動事件節(jié)流處理
let isScrolling;
window.addEventListener('scroll', () => {
clearTimeout(isScrolling);
isScrolling = setTimeout(() => {
// 實際執(zhí)行的操作
}, 100);
});- 自定義事件： 實現(xiàn)組件通信
// 創(chuàng)建事件
const refreshEvent = new Event('dataRefresh');
// 觸發(fā)事件
document.dispatchEvent(refreshEvent);
// 監(jiān)聽事件
document.addEventListener('dataRefresh', loadData);實戰(zhàn)建議（提升代碼質(zhì)量）
- 優(yōu)先使用 addEventListener 替代 on* 屬性
- 移動端務(wù)必添加 touch 事件支持
- 表單驗證使用 input + blur 組合
- 頁面卸載前使用 beforeunload 保存數(shù)據(jù)
- 高頻事件（resize/scroll）必須做節(jié)流處理
根據(jù)MDN官方數(shù)據(jù)，現(xiàn)代瀏覽器對標(biāo)準(zhǔn)事件的兼容性已達(dá)98%以上（IE11除外），開發(fā)者可放心使用。
掌握這些事件機(jī)制，能顯著提升用戶交互體驗。建議在實際項目中多練習(xí)事件委托和自定義事件的使用，這是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵技術(shù)。
責(zé)任編輯：龐桂玉
來源：
web前端開發(fā)
