DOM 事件使網頁具有互動性。使用 DOM 事件可以實現頁面點擊或表單提交，它可以讓開發人員創建引人入勝的使用者體驗。

DOM 事件的一些範例包括使用者點擊滑鼠時、載入網頁時、載入圖片時、提交 HTML 表單時以及使用者按下某個鍵時。

在本文中，我們將簡化 DOM 事件中的關鍵概念並探討如何處理它們。

1. 新增事件監聽器

addEventListener，將事件處理程序附加到元素，它允許您定義元素如何對使用者與頁面的互動做出反應。

範例： 下面的程式碼新增了一個「click」事件，以便在點擊圖像時顯示雞尾酒詳細資訊。

`img.addEventListener('click', () => handleClick(cocktail));`

2. 查詢選擇器

querySelector，讓您可以使用類似 CSS 的選擇器來選擇元素。這是定位元素最通用的方法之一。

範例： 此程式碼正在網頁上建立一個可折疊部分。 document.querySelectorAll 正在選擇網頁上的所有 h3 元素並傳回所有符合元素的 NodeList。

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById 和 getElementsByClassName

getElementById 透過其唯一 id 定位單一元素。

類似地，getElementsByClassName 選擇具有特定類別的所有元素並將它們作為集合傳回。

範例： 下面，getElementById 透過 HTML 文件中的 id 屬性尋找元素。

這裡使用它來存取特定的表單輸入、新名稱、新成分、新圖像、新配方並檢索它們的值。

這些值然後儲存在用 const 定義的 newCocktail 物件的屬性中。

這樣，當使用者提交表單來創建新的雞尾酒時，它就會以結構化的方式儲存在 newCocktail 物件中。

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOM內容加載

DOMContentLoaded 事件可確保您的 JavaScript 僅在 DOM 完全載入後執行，從而防止在元素可用之前嘗試存取元素而發生錯誤。

範例： DOMContentLoaded 是初始 HTML 文件完全載入和解析後觸發的事件，無需等待樣式表、圖像或其他外部資源完全載入。

它確保 DOM 完全構建且可訪問，因此您可以安全地與 HTML 中的元素交互，例如添加事件偵聽器或操作 DOM。

在下面的程式碼中，瀏覽器告訴您該文件現在可用，用戶可以開始與其互動。

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

最後的註釋

DOM 事件是使網頁具有互動性並吸引使用者的基礎。透過瞭解和利用 addEventListener、querySelector、getElementById 和 getElementsByClassName 等核心方法，您可以建立回應點擊、表單提交等的動態使用者介面。

此外，DOMContentLoaded 事件可確保您的腳本僅在 DOM 完全載入後執行，從而防止潛在錯誤並確保流暢的使用者互動。

總之，DOM 事件允許您：

• 使用 addEventListener 附加事件處理程序以實現響應式互動。

• 透過querySelector或getElementById選擇元素，動態更新內容。

• 根據使用者輸入管理事件觸發的操作，例如表單提交。

• 使用 DOMContentLoaded 確保您的腳本在正確的時間運行。

透過這些技術，您可以將靜態網頁轉變為增強使用者參與度的互動體驗。