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

時間 2019-11-16

標籤基礎 document ready javascript onload 事件欄目 JavaScript 简体版

原文原文鏈接

對元素的操做和事件的綁定須要等待一個合適的時機,能夠看下面的例子: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>

　若是這樣,尚未等待元素加載完就綁定事件,html

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

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

　　第一種是把事件綁定放在body裏,元素以後:api

<!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/。dom

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

即當DOM加載完畢的時候,執行這個指定的方法.
　　由於只有document的狀態ready以後,對page的操做纔是安全的.
　　$(document).ready()僅在DOM準備好的時候執行一次.code

　　**與之相比,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=「」>是不兼容的.