JavaScript 事件處理是實現互動性的重要一環，它允許您在網頁中捕獲並處理各種事件，如點擊、滑鼠移動、鍵盤按下等。
那要如何使用 JavaScript 處理事件以及如何將事件處理函數綁定到 HTML 元素呢。

處理事件的步驟

1.選擇目標元素首先:選擇您希望監聽事件的 HTML 元素。您可以使用 document.getElementById、document.querySelector 或其他 DOM 選擇器方法來選擇元素。
2.添加事件監聽器：使用 addEventListener 方法將事件監聽器添加到目標元素上。此方法接受三個參數：事件類型、要執行的函數（事件處理函數）以及選擇是否在捕獲階段處理事件。
3.定義事件處理函數:定義要在事件發生時執行的函數，這個函數稱為事件處理函數。

//1.選擇目標元素
var button = document.getElementById('myButton');

//2.添加點擊事件監聽器
button.addEventListener('click', function() {
    //3.定義事件處理函數
    alert('按鈕被點擊了！');
});

事件類型

JavaScript 支援多種事件類型，包括但不限於：
1.click：點擊事件
2.mouseover 和 mouseout：滑鼠移入和移出事件
3.keydown 和 keyup：鍵盤按下和鬆開事件
4.submit：表單提交事件
5.load：文檔加載完成事件
6.change：輸入框值更改事件

事件對象

當事件觸發時，JavaScript 創建一個包含有關事件的信息的事件對象。您可以在事件處理函數中訪問此對象，以獲取事件的詳細信息，例如事件類型、目標元素、滑鼠位置等。

element.addEventListener('click', function(event) {
    console.log('事件類型：', event.type);
    console.log('目標元素：', event.target);
    console.log('頁面上的X坐標：', event.clientX);
    console.log('頁面上的Y坐標：', event.clientY);
});

事件委派：

事件委派是一種技術，它允許您將事件處理函數添加到父元素，以處理其子元素的事件。這在處理大量相似元素時非常有用，可以減少事件處理程序的數量，提高性能。

document.getElementById('parentElement').addEventListener('click', function(event) {
    if (event.target.classList.contains('childElement')) {
        alert('子元素被點擊了！');
    }
});

這個例子中，我們在父元素上添加點擊事件監聽器，並檢查事件目標是否包含特定的 CSS 類別。如果是，則處理事件。