jQuery ready和JS onload事件的區別

在 jQuery 中，我們使用 $(document).ready() 來替代 JavaScript 中的 window.onload，但這並不是簡單的替換。實際上 jQuery 的 ready 事件和 JavaScript 的 onload 事件雖然有著相同的功能，但是兩者之間也有著細微的區別。

JavaScript的onload事件

在 JavaScript 中，onload 表示文件載入完成後再執行的一個事件。

語法：

window.onload = function(){
……
}

對於 JavaScript 的 onload 事件來說，只有當頁面上的所有 DOM 元素以及所有外部檔案（圖片、外部 CSS、外部 JavaScript 等）載入完成之後才會執行。這裡的“所有 DOM 元素”，指的是 HTML 部分的程式碼。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/index.css"  rel="stylesheet" type="text/css" />
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function(){
                alert("歡迎來到 C語言中文網！");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交"><br/>
    <img src="img/1.png" alt="">
</body>
</html>

程式執行效果如圖 1 所示。

圖 1：JavaScript 的 onload 事件