JavaScript 的事件處理是網頁應用程序交互的核心之一，它使得用戶能夠通過點擊、鍵盤輸入、滑動等操作與網頁互動。事件處理為開發者提供了監聽和響應用戶操作的能力，使頁面更加動態和反應靈敏。

1. 什麼是事件？

在 JavaScript 中，"事件" 是用來描述用戶或瀏覽器執行的某種行為的對象。常見的事件包括：

• 滑鼠事件：click（點擊）、dblclick（雙擊）、mouseover（滑鼠懸停）、mouseout（滑鼠移出）
• 鍵盤事件：keydown（按下鍵盤按鍵）、keyup（釋放鍵盤按鍵）、keypress（按下字符鍵）
• 表單事件：submit（提交表單）、change（表單值改變）
• 瀏覽器事件：load（頁面加載完成）、resize（窗口大小改變）、scroll（滾動條移動）

每一個事件都可以被綁定到一個或多個 DOM 元素，當事件發生時，JavaScript 會執行相應的處理函式。

2. 事件監聽與處理

JavaScript 使用「事件監聽器」（Event Listener）來監聽特定事件，並指定當事件發生時要執行的回調函數（處理程序）。

範例：簡單的事件處理

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

在這個例子中，當用戶點擊按鈕時，click 事件會被觸發，並且會執行一個彈出訊息框的函數。addEventListener 是最常用來綁定事件的方法。

事件綁定方式

事件綁定有幾種不同的方法：

1. addEventListener()：現代且推薦使用的方法，因為它允許同一元素上綁定多個事件處理程序，並且支持移除監聽器。
2. HTML 屬性事件處理器：例如 <button onclick="alert('clicked!')">，這種方式容易在 HTML 和 JavaScript 之間混淆代碼。
3. 事件處理器屬性：例如 element.onclick = function() {...};，這樣只允許綁定一個處理程序。

3. 事件對象（Event Object）

每當事件發生時，JavaScript 都會創建一個事件對象，並傳遞給處理程序。這個對象包含了事件的相關信息，如事件類型、觸發事件的元素，以及滑鼠座標或按下的鍵等。

範例：使用事件對象

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function(event) {
    console.log(event);  // 打印事件對象
    console.log('Button ID:', event.target.id);  // 觸發事件的元素
  });
</script>

這裡的 event 對象包含了點擊事件的所有細節，event.target 是事件發生的元素，可以用來獲取按鈕的 ID 或其他屬性。

4. 事件傳遞與冒泡機制

在 HTML 結構中，事件從觸發它的元素開始，會向父級元素傳遞，這稱為「事件冒泡」（Event Bubbling）。也就是說，如果一個元素觸發了事件，該事件會沿著 DOM 樹向上冒泡到根元素。

範例：事件冒泡

<div id="parentDiv">
  <button id="childButton">Click Me</button>
</div>

<script>
  const parentDiv = document.getElementById('parentDiv');
  const childButton = document.getElementById('childButton');

  parentDiv.addEventListener('click', function() {
    console.log('Parent clicked!');
  });

  childButton.addEventListener('click', function(event) {
    console.log('Button clicked!');
    event.stopPropagation();  // 阻止事件冒泡
  });
</script>

在這個例子中，點擊按鈕後，按理說父級元素的事件也會被觸發，但 event.stopPropagation() 阻止了事件從按鈕冒泡到父元素，因此只會打印 "Button clicked!"。

5. 事件委派（Event Delegation）

事件委派是一種優化技術，它允許開發者將事件處理程序綁定到父元素，從而處理多個子元素的事件。這對於動態添加元素或有大量子元素的情況特別有用。

範例：使用事件委派

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const myList = document.getElementById('myList');

  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert(event.target.textContent + ' clicked!');
    }
  });
</script>

在這個例子中，點擊 ul 中的任意 li 元素都會觸發 click 事件處理程序，因為事件是綁定在父元素 ul 上的，這就是事件委派。這種技術可以提高性能，尤其是當有大量動態元素時。

6. 預設行為與 preventDefault()

某些 HTML 元素有自己的預設行為，例如 <a> 標籤的超連結跳轉，或表單的提交。使用 event.preventDefault() 可以阻止這些預設行為。

範例：阻止表單提交的預設行為

<form id="myForm">
  <input type="text" placeholder="Enter something">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    event.preventDefault();  // 阻止表單提交
    alert('Form submission prevented!');
  });
</script>

在這個範例中，點擊提交按鈕不會刷新頁面，因為 preventDefault() 阻止了表單的預設提交行為。

7. 事件處理的最佳實踐

• 避免內聯事件處理器：使用內聯事件會讓 HTML 和 JavaScript 代碼混雜在一起，降低代碼可讀性和維護性。
• 使用事件委派：當需要監聽大量子元素時，使用事件委派可以提高性能。
• 事件冒泡與捕獲：理解事件的冒泡和捕獲機制，根據需要適當使用 stopPropagation() 或 preventDefault()。

總結

JavaScript 的事件處理機制是網頁動態交互的基礎，透過事件監聽器、事件委派、阻止預設行為等技術，可以靈活地處理使用者的操作，打造流暢的用戶體驗。熟練掌握這些技巧，可以讓網頁應用更具互動性和可用性。