javascript提供多種事件監聽器綁定方式：html事件屬性addeventlistener()方法事件代理domcontentloaded事件window.onload事件
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 = () => {
// 在這里綁定事件處理程序
};
登錄后復制
