全面解析jQuery $(document).ready()和JavaScript onload事件

更新時間：2016年06月08日 10:09:32 投稿：mrr

這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

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

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已經加載完畢 !");
}
/*執(zhí)行錯誤*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

如果這樣,還沒有等待元素加載完就給 div#panel 綁定了一個事件，瀏覽器Console中會報錯: TypeError:

document.getElementById(...) is null

更改一下時機,下面三個程序都是可以成功綁定事件的,點擊元素之后會彈出相應的alert().

把事件綁定放在body里,元素之后:

由于綁定事件在元素之后，所以可以成功獲取 div#panel 的元素，并在 div#panel 上綁定點擊事件。

<!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("元素已經加載完畢 !");
}
/*正確執(zhí)行*/
</script>
</body>
</html>

把事件綁定放在window.onload中進行事件綁定:

window.onload 事件的處理函數(shù)則在頁面所有元素加載完成之后才執(zhí)行，所以這里給獲取元素并綁定事件也是可行的。

<!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("元素已經加載完畢 !");
}
/*正確執(zhí)行*/
</script>
</body>
</html>
jQuery的ready()方法傳入綁定事件的方法:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick = function () {
alert("元素已經加載完畢 !");
}
/*正確執(zhí)行*/
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

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

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

這個方法接收一個function類型的參數(shù)ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.即當DOM加載完畢的時候,執(zhí)行這個指定的方法.因為只有document的狀態(tài)ready之后,對元素的操作才是安全的. $(document).ready() 僅在DOM準備好的時候執(zhí)行一次,但可以多次綁定 ready 事件。

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

如果DOM初始化完成之后再調用ready()方法,傳入的新的handler將會立即執(zhí)行.

注意:ready()方法多次調用,傳入的handler方法會串聯(lián)執(zhí)行(追加).而JavaScript中,window.onload是賦值一個方法,即后面的會覆蓋掉前面的.

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

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

window對象和document對象

Window對象表示瀏覽器中打開的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Document對象表示載入瀏覽器的HTML文檔: http://www.w3school.com.cn/jsref/dom_obj_document.asp

Event對象

Event 即事件,代表了各種狀態(tài):http://www.w3school.com.cn/jsref/dom_obj_event.asp

事件句柄使我們可以在事件發(fā)生的時候附加一些操作和處理,比如按鈕點擊事件發(fā)生的時候,進行什么什么操作.上面的參考鏈接中含有一個屬性列表,對應各種事件,可以利用這些屬性定義事件的行為.文中關注的onload就是其中一個事件.

onload事件

onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp

onload 事件是在加載完成后立即發(fā)生.(注意其中的l是小寫).

支持該事件的標簽是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持該事件的JavaScript對象是: image, layer, window .注意這里并沒有 document .

onload使用解析

最常用的就是 window.onload , 會等到整個頁面及各種資源都加載完成之后再執(zhí)行后面賦值的 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=""> 是不兼容的.

以上所述是小編給大家介紹的全面解析jQuery $(document).ready()和JavaScript onload事件的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: