JavaScript DOM 事件物件 e 屬性介紹:新手指南
更新日期: 2024 年 10 月 23 日
在網頁開發中,JavaScript 提供了強大的事件處理功能,讓我們能夠響應用戶與網頁的交互行為。
當用戶點擊按鈕、移動滑鼠或輸入文字時,這些動作會觸發相應的事件,JavaScript 會生成一個事件物件(通常稱為 e
或 event
),其中包含有關該事件的各種信息。
這篇文章將介紹 JavaScript 中 e
(事件物件)的常見屬性,並通過實例展示它們的應用,幫助新手理解如何處理事件。
什麼是事件物件 e
?
當我們在網頁中觸發事件(例如點擊、鍵盤輸入或滑鼠移動)時,JavaScript 會自動生成一個包含該事件所有信息的物件,這個物件通常被簡稱為 e
或 event
。
通過訪問這個物件的屬性,我們可以獲取事件發生時的詳細信息,如事件類型、觸發事件的元素、滑鼠位置、按下的按鍵等。
事件物件的屬性非常豐富,下面介紹一些常見且實用的屬性。
常見的 e
(事件物件)屬性
e.target
e.target
屬性返回觸發事件的 DOM 元素,即事件最初發生的目標元素。
這是處理事件時經常用到的屬性,因為它可以幫助我們確定是哪個元素觸發了事件。
範例:
document.getElementById('myButton').addEventListener('click', function(e) {
console.log(e.target); // 這會輸出觸發點擊事件的按鈕元素
});
在這個範例中,點擊按鈕時,e.target
將返回該按鈕的 DOM 物件,讓我們可以訪問或操作它。
e.type
e.type
返回事件的類型,即事件是「click」、「keydown」、「mouseover」等。
這個屬性可以幫助我們判斷具體的事件類型,並基於此進行不同的操作。
範例:
document.addEventListener('click', function(e) {
console.log(e.type); // 這會輸出 'click'
});
在這裡,無論點擊哪個元素,e.type
都會返回事件的類型。
e.preventDefault()
e.preventDefault()
是一個方法,用來阻止瀏覽器執行默認行為。
例如,在表單提交時,阻止頁面刷新;在點擊連結時,阻止導航到新的頁面。
範例:
document.getElementById('myLink').addEventListener('click', function(e) {
e.preventDefault(); // 阻止連結的默認行為(導航)
console.log('默認行為已被阻止');
});
這個範例中,點擊連結後,頁面不會跳轉,因為我們阻止了瀏覽器的默認行為。
e.stopPropagation()
e.stopPropagation()
是一個用來阻止事件冒泡的方法。
事件冒泡是指當事件發生時,它會從最內層的元素向外層元素逐層傳遞。
使用這個方法可以阻止事件冒泡到其他元素。
範例:
document.getElementById('child').addEventListener('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡
console.log('子元素點擊');
});
document.getElementById('parent').addEventListener('click', function() {
console.log('父元素點擊');
});
點擊子元素時,只會觸發子元素的事件處理程序,父元素的事件處理程序不會被觸發,因為事件冒泡被 e.stopPropagation()
阻止了。
e.clientX
和 e.clientY
這兩個屬性分別返回滑鼠事件發生時的 X 和 Y 座標,相對於瀏覽器視窗左上角的位置。
它們通常用來跟蹤滑鼠在視窗中的位置。
範例:
document.addEventListener('click', function(e) {
console.log(`滑鼠 X 座標: ${e.clientX}, 滑鼠 Y 座標: ${e.clientY}`);
});
每次點擊頁面時,會輸出當前滑鼠的位置。
e.key
和 e.code
這兩個屬性用於處理鍵盤事件。e.key
返回按下的實際鍵值(例如 'a'
、'Enter'
),而 e.code
返回鍵盤上的物理鍵位代碼(例如 'KeyA'
、'Enter'
)。
範例:
document.addEventListener('keydown', function(e) {
console.log(`按下的鍵: ${e.key}, 代碼: ${e.code}`);
});
這個範例會捕捉使用者按下的鍵盤按鍵,並輸出對應的按鍵名稱和代碼。
e.shiftKey
、e.ctrlKey
、e.altKey
這些屬性是布林值,用來檢測事件發生時,是否按下了 Shift、Ctrl 或 Alt 鍵。這對於實現組合鍵操作非常有用。
範例:
document.addEventListener('click', function(e) {
if (e.shiftKey) {
console.log('按住 Shift 點擊');
}
});
在這裡,只有當用戶按住 Shift 鍵並點擊時,才會輸出相應的訊息。
綜合範例:捕捉與處理多種事件屬性
以下是一個綜合範例,展示了如何使用多個 e
(事件物件)屬性來處理事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件物件示範</title>
</head>
<body>
<button id="myButton">點擊我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
// 獲取事件的基本信息
console.log(`事件類型: ${e.type}`);
console.log(`觸發事件的元素: ${e.target.tagName}`);
// 阻止默認行為
e.preventDefault();
// 檢查是否按住了 Shift 鍵
if (e.shiftKey) {
console.log('按住 Shift 點擊按鈕');
}
// 獲取滑鼠的 X 和 Y 座標
console.log(`滑鼠 X 座標: ${e.clientX}, 滑鼠 Y 座標: ${e.clientY}`);
});
</script>
</body>
</html>
這個範例展示了如何在按鈕點擊時,使用事件物件的多個屬性來獲取相關信息。
點擊按鈕時,會輸出事件類型、觸發事件的元素、滑鼠座標,並且當按住 Shift 鍵時,也會顯示相應的訊息。
結論
事件物件 e
是處理 JavaScript 事件的重要工具,它包含了大量有關事件發生時的有用信息。
通過理解並靈活運用這些屬性,你可以更有效地響應用戶操作,並實現更加動態和互動的網頁應用。
希望這篇文章能幫助你理解 JavaScript DOM 中的 e
屬性,並開始應用它來處理各種事件!