事件綁定有兩種主要方式：html內聯綁定和addEventlistener添加監聽器。1.使用onclick屬性直接在html標簽中綁定函數，適合小型項目但結構混亂；2.addeventlistener可添加多個同類型事件且分離結構與行為，推薦用于復雜項目。此外，onload或window.addeventlistener(“load”)可在頁面加載完成后執行代碼，而domcontentloaded則在dom加載后立即觸發。注意函數作用域、執行時機及瀏覽器兼容性問題。
html元素綁定JavaScript事件，是網頁實現交互功能的基礎操作。最常見的比如點擊按鈕觸發動作、頁面加載完成后執行代碼等，都離不開事件監聽的設置。
用 onclick 直接綁定函數
這是最簡單也最常見的方法，直接在 HTML 標簽中寫上 onclick 屬性，后面跟一個要執行的函數名或表達式。
比如：
立即學習“前端免費學習筆記（深入）”；
<button onclick="alert('你點擊了按鈕')">點我</button>
這種方式適合快速測試或者小型項目使用。優點是寫法直觀，缺點是結構和行為混在一起，不利于維護。如果需要傳遞參數，也可以這樣寫：
<button onclick="sayHello('小明')">打招呼</button>
需要注意的是，如果你在多個地方綁定了同一個元素的 onclick，后面的會覆蓋前面的。
使用 addEventListener 添加監聽器
更推薦的方式是使用 JavaScript 的 addEventListener 方法來綁定事件。這種方法可以給同一個元素添加多個相同類型的事件監聽器，不會相互覆蓋。
基本語法如下：
element.addEventListener(event, function, useCapture);
- event 是事件類型（如 “click”, “load”）
- function 是要執行的函數
- useCapture 可選，是否在捕獲階段執行，默認是 false
舉個例子：
document.getElementById("myBtn").addEventListener("click", function() { alert("按鈕被點擊了"); });
這種方式的好處是可以分離 HTML 和 JS 代碼，讓結構更清晰，也更容易管理和調試。
onload 用于頁面或資源加載完成時觸發
除了點擊事件，有時候我們需要在頁面或某些資源加載完成后執行代碼。這時候就可以用 onload 事件。
比如想在頁面完全加載后彈出提示：
<body onload="pageLoaded()">
對應的 JS 函數：
function pageLoaded() { alert("頁面已加載完成"); }
也可以用 addEventListener 來綁定 load 事件：
window.addEventListener("load", function() { console.log("所有資源加載完畢"); });
注意：window.onload 或 body.onload 指的是整個頁面（包括圖片、樣式等）都加載完才會觸發，所以如果只是想在 DOM 加載完就執行，可以用 DOMContentLoaded 事件。
小貼士：注意作用域和執行時機
- 如果你在 HTML 中直接寫內聯事件處理函數，要注意函數必須在全局作用域下可訪問。
- 使用 addEventListener 時，建議將腳本放在 DOM 元素之后，或者使用 DOMContentLoaded 確保元素存在。
- 多個監聽器之間不會互相干擾，但也要注意內存管理，必要時用 removeEventListener 移除。
- 有些瀏覽器對某些事件支持不同，比如 onload 在
上表現可能略有差異，需做兼容處理。
基本上就這些內容了。掌握這幾種方式，就能靈活地為 HTML 元素添加交互邏輯了。
