JavaScript DOM 事件物件 e 屬性介紹:新手指南

更新日期: 2024 年 10 月 23 日

在網頁開發中,JavaScript 提供了強大的事件處理功能,讓我們能夠響應用戶與網頁的交互行為。

當用戶點擊按鈕、移動滑鼠或輸入文字時,這些動作會觸發相應的事件,JavaScript 會生成一個事件物件(通常稱為 eevent),其中包含有關該事件的各種信息。

這篇文章將介紹 JavaScript 中 e(事件物件)的常見屬性,並通過實例展示它們的應用,幫助新手理解如何處理事件。


什麼是事件物件 e

當我們在網頁中觸發事件(例如點擊、鍵盤輸入或滑鼠移動)時,JavaScript 會自動生成一個包含該事件所有信息的物件,這個物件通常被簡稱為 eevent

通過訪問這個物件的屬性,我們可以獲取事件發生時的詳細信息,如事件類型、觸發事件的元素、滑鼠位置、按下的按鍵等。

事件物件的屬性非常豐富,下面介紹一些常見且實用的屬性。


常見的 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.clientXe.clientY

這兩個屬性分別返回滑鼠事件發生時的 X 和 Y 座標,相對於瀏覽器視窗左上角的位置。

它們通常用來跟蹤滑鼠在視窗中的位置。

範例:

document.addEventListener('click', function(e) {
  console.log(`滑鼠 X 座標: ${e.clientX}, 滑鼠 Y 座標: ${e.clientY}`);
});

每次點擊頁面時,會輸出當前滑鼠的位置。


e.keye.code

這兩個屬性用於處理鍵盤事件。e.key 返回按下的實際鍵值(例如 'a''Enter'),而 e.code 返回鍵盤上的物理鍵位代碼(例如 'KeyA''Enter')。

範例:

document.addEventListener('keydown', function(e) {
  console.log(`按下的鍵: ${e.key}, 代碼: ${e.code}`);
});

這個範例會捕捉使用者按下的鍵盤按鍵,並輸出對應的按鍵名稱和代碼。


e.shiftKeye.ctrlKeye.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 屬性,並開始應用它來處理各種事件!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *