JavaScript 將 HTML 行內事件綁定改為 JS 代碼分離的最佳實踐

問題場景

HTML 中直接寫 onmouseover、onmouseout 等行內事件，導致結構與行為耦合，維護困難。需將事件綁定邏輯移至 JavaScript 代碼中。

解決方案：統一獲取元素後批量綁定

// 假設 6 個 div 的 id 為 "1" 到 "6"
for (var i = 1; i <= 6; i++) {
    var el = document.getElementById(i);
    if (el) {
        el.onmouseover = function() { showGood(this.id); };
        el.onmouseout = noGood;
    }
}

進階寫法：使用事件委派（推薦）

若元素動態生成或數量大，建議在父容器綁定單一事件：

document.getElementById('container').addEventListener('mouseover', function(e) {
    if (e.target.matches('.item')) showGood(e.target.id);
});
document.getElementById('container').addEventListener('mouseout', function(e) {
    if (e.target.matches('.item')) noGood();
});

注意事項

• 避免在迴圈中直接使用 i 形成閉包陷阱（上方代碼用 this.id 正確獲取）。
• 優先使用 addEventListener 而非 onxxx，支援多監聽器且不覆蓋。
• 確保 DOM 就緒後執行綁定（放在 DOMContentLoaded 或腳體底部）。