JavaScript window.onload 賦值 vs 調用：加括號與不加括號的本質區別

問題代碼

function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}

window.onload = countBodyChildren;   // 正確
window.onload = countBodyChildren(); // 錯誤

核心區別

圖解執行流程

// 寫法 1：賦值引用
window.onload = countBodyChildren;
// 內存：onload → 指向函數 countBodyChildren 的地址
// 頁面載入完 → 瀏覽器調用 onload() → 彈窗顯示節點數

// 寫法 2：賦值調用結果
window.onload = countBodyChildren();
// 立即執行 countBodyChildren() → 彈窗顯示節點數 → 返回 undefined
// 內存：onload → undefined
// 頁面載入完 → 瀏覽器嘗試調用 undefined() → TypeError 或靜默失敗

同理可證：事件綁定最佳實踐

// ✅ 正確：傳遞函數引用
btn.onclick = handleClick;
element.addEventListener('click', handleClick);

// ❌ 錯誤：立即執行
btn.onclick = handleClick();

// ✅ 需傳參時：使用箭頭函數/匿名函數包裹
btn.onclick = () => handleClick(arg1, arg2);
element.addEventListener('click', () => handleClick(arg1, arg2));

進階：DOMContentLoaded vs load

• DOMContentLoaded：HTML 解析完成，DOM 樹就緒（不等待圖片/樣式）
• load（window.onload）：所有資源（圖片、CSS、Script）完全載入
• 現代開發推薦 DOMContentLoaded 或將 Script 放 </body> 前

記住口訣：「賦值不加括號，調用才加括號」。事件處理器期望的是函數引用，而非執行結果。