JavaScript事件綁定

JavaScript提供了多種方法來綁定事件監聽器，以響應特定事件（例如單擊、懸停或鍵盤輸入）時執行某些操作。最常用的方法有：

1. HTML事件屬性

這種方法直接在HTML元素的事件屬性中設置事件處理函數。例如：

<button onclick="alert('按鈕被點擊了！')">點我</button>

2. addEventListener() 方法

更為靈活的方法是使用 addEventListener() 方法。該方法帶三個參數：

事件類型（例如 “click” 或 “mouseover”）
事件處理函數
是否在捕獲階段還是冒泡階段處理事件（可選）

例如：

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('按鈕被點擊了！');
});

3. 事件代理

當你想為大量元素綁定相同的事件處理程序時，事件代理可以提高效率。通過將事件處理程序綁定到父元素，可以避免為每個子元素單獨綁定。例如：

const container = document.getElementById('container');
container.addEventListener('click', (event) => {
  const target = event.target;
  if (target.tagName === 'BUTTON') {
    alert('按鈕被點擊了！');
  }
});

4. DOMContentLoaded 事件

當整個文檔加載完畢（包括解析、編譯和執行腳本）時觸發 DOMContentLoaded 事件。這可以用于在頁面加載后立即執行代碼，例如綁定事件處理程序。

document.addEventListener('DOMContentLoaded', () => {
  // 在這里綁定事件處理程序
});

5. window.onload 事件

window.onload 事件在整個頁面（包括外部資源）加載完成后觸發。它不太常用，因為在 DOM 加載完畢之前就觸發，導致在早期階段無法訪問 DOM 元素。

window.onload = () => {
  // 在這里綁定事件處理程序
};