了解 JavaScript 中的 DOM 事件：互動綜合指南

JavaScript 中的 DOM 事件

DOM 事件 是瀏覽器中發生的操作或事件，例如使用者互動、資源載入或狀態變更。事件是 Web 開發不可或缺的一部分，允許開發人員使網頁具有互動性。

---

1.什麼是 DOM 事件？

DOM 事件表示可以使用 JavaScript 偵測到的互動或變更。事件範例包括：

• 點選按鈕（點選）
• 在輸入欄位中鍵入（input、keydown、keyup）
• 將滑鼠停留在元素上（滑鼠懸停、滑鼠移開）
• 提交表格（提交）
• 頁面載入完成（load）

---

2.事件監聽器

事件監聽器是等待目標元素上發生特定事件的函數。

新增事件監聽器

使用 addEventListener 方法將事件偵聽器附加到元素。

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

刪除事件監聽器

使用removeEventListener方法分離事件監聽器。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. DOM 事件的類型

A.老鼠事件

• click：當滑鼠點擊元素時觸發。
• dblclick：雙擊滑鼠時觸發。
• mouseover：當滑鼠進入元素時觸發。
• mouseout：當滑鼠離開元素時觸發。

B.鍵盤事件

• keydown：按下某個鍵時觸發。
• keyup：釋放按鍵時觸發。
• keypress：已棄用，請使用 keydown 代替。

C.表單事件

• 提交：提交表單時觸發。
• 更改：當輸入元素的值更改時觸發。

D.窗口活動

• load：頁面完全載入時觸發。
• resize：調整瀏覽器視窗大小時觸發。
• scroll：頁面滾動時觸發。

E.輸入事件

• input：當輸入欄位的值改變時觸發。
• focus：當輸入元素獲得焦點時觸發。
• 模糊：當輸入元素失去焦點時觸發。

---

4.事件物件

當事件發生時，JavaScript 會提供一個 事件物件，其中包含有關該事件的詳細資訊。

事件物件的常用屬性

• type：事件類型（例如，按一下、按鍵）。
• target：觸發事件的元素。
• currentTarget：事件處理程序所附加到的元素。
• PreventDefault(): 封鎖事件的預設操作。
• stopPropagation()：停止事件傳播到父元素。

範例

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5.事件傳播

事件傳播決定事件處理程序的執行順序。

A.事件冒泡

事件從目標元素開始並向上冒泡到其祖先。

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

點擊按鈕將觸發兩個處理程序。

B.事件擷取

事件從根元素開始，向下移動到目標元素。

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
  event.preventDefault(); // Prevent default behavior
});

將第三個參數設為 true 即可啟用擷取。

停止傳播

使用 stopPropagation() 來防止進一步傳播。

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

---

6.委託事件

事件委託利用事件冒泡來管理動態新增元素的事件。

範例

element.addEventListener("click", handler, true);

---

7.實際範例

A.切換可見性

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B.表單驗證

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C.無限滾動

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8.總結

• DOM 事件允許使用者和網頁之間的互動。
• 使用 addEventListener 附加事件處理程序。
• 了解事件物件和傳播以進行有效的事件管理。
• 在處理動態元素時使用事件委託以獲得更好的效能。

透過掌握 DOM 事件，您可以建立高度互動且使用者友好的 Web 應用程式。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是了解 JavaScript 中的 DOM 事件：互動綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！