一、前言
在前端開發中，用戶與頁面的交互行為（如點擊按鈕、輸入文本、滾動頁面等）都會觸發相應的事件。而這些事件發生時，瀏覽器會自動創建一個 事件對象（Event Object），它包含了當前事件的所有信息。
掌握事件對象是實現復雜交互邏輯的基礎技能之一。本文將帶你深入了解：
- 什么是事件對象；
- 事件對象的常見屬性與方法；
- 如何阻止默認行為與事件傳播；
- 實際開發中的典型使用場景；
- 推薦的最佳實踐；
通過這篇文章，你將能夠熟練地使用 event 對象來增強網頁的交互體驗。
二、什么是事件對象？
當一個事件被觸發時（例如點擊、鍵盤按下、鼠標移動等），瀏覽器會自動為該事件創建一個事件對象（Event 或其子類實例），并將其作為參數傳遞給事件處理函數。
document.addEventListener('click', function(event) {console.log(event)
})📌 事件對象包含的信息有：
- 觸發事件的目標元素（target）
- 鼠標位置坐標（clientX / clientY）
- 鍵盤按鍵值（keyCode）
- 是否按下了 Ctrl/Shift 等修飾鍵
- 阻止默認行為的方法（preventDefault）
- 阻止事件傳播的方法（stopPropagation）
三、事件對象的主要屬性和方法
| 屬性/方法 | 描述 |
|---|---|
target | 觸發事件的真實元素（原始觸發者） |
currentTarget | 綁定事件監聽器的元素（this 指向的對象） |
type | 事件類型（如 'click'、'keydown' 等） |
preventDefault() | 阻止瀏覽器的默認行為（如鏈接跳轉、表單提交） |
stopPropagation() | 阻止事件繼續傳播（捕獲或冒泡） |
stopImmediatePropagation() | 阻止該事件的所有后續監聽器執行 |
bubbles | 表示該事件是否會冒泡 |
cancelable | 表示是否可以取消該事件的默認行為 |
eventPhase | 當前事件所處的階段（捕獲、目標、冒泡） |
? 示例：獲取事件對象的基本信息
<a href="https://example.com" id="link">點擊我</a><script>
document.getElementById('link').addEventListener('click', function(event) {console.log('事件類型:', event.type) // clickconsole.log('目標元素:', event.target) // <a> 元素console.log('綁定事件的元素:', event.currentTarget) // 同上console.log('是否可阻止默認:', event.cancelable) // trueconsole.log('是否冒泡:', event.bubbles) // trueconsole.log('事件階段:', event.eventPhase) // 2（目標階段）
})
</script>四、target?與?currentTarget?的區別
這是開發者最容易混淆的一組屬性。
🧠 理解差異：
event.target：真正觸發事件的 DOM 元素（可能是子元素）。event.currentTarget：綁定事件監聽器的那個元素（即?this）。
? 示例說明：
<div id="container"><button id="btn">點擊我</button>
</div><script>
document.getElementById('container').addEventListener('click', function(event) {console.log('event.target:', event.target) // 可能是 button 或 divconsole.log('event.currentTarget:', event.currentTarget) // 始終是 container
})
</script>📌 場景總結：
| 使用場景 | 推薦屬性 |
|---|---|
| 獲取真正點擊的元素 | event.target |
| 獲取綁定事件的元素 | event.currentTarget |
五、阻止默認行為：preventDefault()
有些 HTML 元素自帶默認行為，比如：
<a>?標簽點擊會跳轉；<form>?提交會刷新頁面；<input type="checkbox">?點擊會切換狀態；
我們可以使用 event.preventDefault() 來阻止這些默認行為。
? 示例：阻止鏈接跳轉
document.querySelector('a').addEventListener('click', function(event) {event.preventDefault()alert('鏈接被點擊，但沒有跳轉')
})📌 注意事項：
- 不會影響事件傳播；
- 適用于自定義行為替代默認行為的場景。
六、阻止事件傳播：stopPropagation()
默認情況下，事件會在 DOM 樹中進行傳播（捕獲 → 目標 → 冒泡）。我們可以通過 stopPropagation() 來阻止事件繼續傳播到其他節點。
? 示例：阻止父級元素響應事件
<div id="parent">父容器<button id="child">點擊我</button>
</div><script>
document.getElementById('parent').addEventListener('click', () => {console.log('父元素被點擊')
})document.getElementById('child').addEventListener('click', function(event) {console.log('子元素被點擊')event.stopPropagation()
})
</script>📌 輸出結果：
子元素被點擊父元素不會收到事件通知。
七、徹底阻止事件：stopImmediatePropagation()
如果你希望不僅阻止事件傳播，還想阻止當前元素上的其它監聽器執行，可以使用這個方法。
? 示例：
const btn = document.getElementById('btn')btn.addEventListener('click', function (e) {console.log('第一個監聽器')e.stopImmediatePropagation()
})btn.addEventListener('click', function () {console.log('第二個監聽器') // 不會執行
})📌 效果：
- 第一個監聽器調用?
stopImmediatePropagation()?后，所有后續監聽器都不會執行。
八、事件對象的實際應用場景
| 場景 | 描述 |
|---|---|
| 表單驗證 | 在 submit 事件中使用?preventDefault()?自定義提交邏輯 |
| 彈窗關閉 | 點擊遮罩層關閉彈窗，使用?target?判斷是否點擊了遮罩區域 |
| 表格行點擊 | 獲取點擊的具體行數據 |
| 鼠標坐標獲取 | 記錄用戶點擊的位置 |
| 多個監聽器控制 | 使用?stopImmediatePropagation()?控制優先級 |
| 動態加載內容 | 通過?target?判斷點擊的是哪個動態生成的元素 |
九、事件對象的兼容性注意事項
雖然現代瀏覽器都支持標準的 Event API，但在一些舊版本瀏覽器（如 IE）中可能會存在兼容問題。
| 方法/屬性 | IE 支持情況 | 解決方案 |
|---|---|---|
event.target | ? IE9+ | |
event.currentTarget | ? IE8 及以下不支持 | |
event.preventDefault() | ? IE9+ | |
event.stopPropagation() | ? IE9+ | |
event.stopImmediatePropagation() | ? IE 不支持 | |
event.clientX / Y | ? 支持良好 |
📌 推薦做法：
- 使用現代瀏覽器開發；
- 若需兼容舊版瀏覽器，建議使用框架（如 jQuery）封裝兼容性處理；
- 或自行封裝 polyfill。
十、總結對比表
| 特性 | 推薦方式 |
|---|---|
| 獲取觸發元素 | event.target |
| 獲取綁定元素 | event.currentTarget |
| 阻止默認行為 | event.preventDefault() |
| 阻止事件傳播 | event.stopPropagation() |
| 徹底阻止事件 | event.stopImmediatePropagation() |
| 獲取鼠標坐標 | event.clientX / clientY |
| 推薦程度 | ? 所有開發者必須掌握 |
十一、結語
感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！
)
)
