jQ基礎篇–$(document).ready()和JavaScript onload事件

風雨後見彩虹發表於2015-09-02
JavaScript事件

對元素的操作和事件的繫結需要等待一個合適的時機,可以看下面的例子:

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>1-1</title>
    <script type="text/javascript">
        document.getElementById("panel").onclick = function () {
            alert("元素已經載入完畢 !");
        }
        /*執行錯誤*/
    </script>
</head>

<body>
<div id="panel">click me.</div>
</body>

</html>

　如果這樣,還沒有等待元素載入完就繫結事件,

　　瀏覽器Console中會報錯:
　　TypeError: document.getElementById(…) is null

　　更改一下時機,下面三個程式都是可以成功繫結事件的,點選元素之後會彈出相應的alert().

　　第一種是把事件繫結放在body裡,元素之後:

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>1-2</title>
</head>

<body>
<div id="panel">click me.</div>
<script type="text/javascript">
    document.getElementById("panel").onclick = function () {
        alert("元素已經載入完畢 !");
    }
    /*正確執行*/
</script>
</body>

</html>

第二種是放在window.onload中進行事件繫結:

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>1-2</title>
</head>

<body>
<div id="panel">click me.</div>
<script type="text/javascript">
    document.getElementById("panel").onclick = function () {
        alert("元素已經載入完畢 !");
    }
    /*正確執行*/
</script>
</body>

</html>

第三種是jQuery的ready()方法傳入繫結事件的方法:

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>1-3</title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("panel").onclick = function () {
                alert("元素已經載入完畢 !");
            }
        }
    </script>
</head>

<body>
<div id="panel">click me.</div>
</body>

</html>

jQuery $(document).ready()和window.onload

根據ready()方法的API說明http://api.jquery.com/ready/。

這個方法接收一個function型別的引數ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.

即當DOM載入完畢的時候,執行這個指定的方法.
　　因為只有document的狀態ready之後,對page的操作才是安全的.
　　$(document).ready()僅在DOM準備好的時候執行一次.

　　**與之相比,load事件會等到頁面渲染完成執行,即等到所有的資源(比如圖片)都完全載入完成的時候.
　　$(window).load(function(){…})會等整個頁面,不僅僅是DOM,還包括影像和iframes都準備好之後,再執行.**
　　而ready()是在DOM準備好之後就執行了,即DOM樹建立完成的時候.所以通常ready()是一個更好的時機.

　　如果DOM初始化完成之後再呼叫ready()方法,傳入的新的handler將會立即執行.

　　**注意:ready()方法多次呼叫,傳入的handler方法會串聯執行(追加).
　　而JavaScript中,window.onload是賦值一個方法,即後面的會覆蓋掉前面的.**

$(document).ready()的三種簡寫

$( document ).ready( handler )

$().ready( handler ) (this is not recommended)

$( handler )

window物件和document物件

　Window物件表示瀏覽器中開啟的視窗: http://www.w3school.com.cn/js…
　Document物件表示載入瀏覽器的HTML文件: http://www.w3school.com.cn/js…

Event物件

　　Event即事件,代表了各種狀態:http://www.w3school.com.cn/js…
　　事件控制程式碼使我們可以在事件發生的時候附加一些操作和處理,比如按鈕點選事件發生的時候,進行什麼什麼操作.
　　上面的參考連結中含有一個屬性列表,對應各種事件,可以利用這些屬性定義事件的行為.
　　本文關注的onload就是其中一個事件.

onload事件

　　onload事件: http://www.w3school.com.cn/js…
　　onload事件是在載入完成後立即發生.(注意其中的l是小寫).
　　支援該事件的標籤是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

　　支援該事件的JavaScript物件是:
　　image, layer, window.
　　注意這裡並沒有document.

onload使用解析

　　最常用的就是window.onload, 會等到整個頁面及各種資源都載入完成之後再執行後面賦值的function行為.
　　另外,可以在標籤中使用onload,比如:

<body onload="inlineBodyOnloadTimeCounter();">

　　其中inlineBodyOnloadTimeCounter()是一個自定義的JavaScript function.
　　注意jQuery ready()的API文件中有這麼一段:

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery`s .load() method to attach load event handlers to the window or to more specific items, like images.

註釋：ready()方法和<body onload=“”>是不相容的.

相關文章