jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解

更新時間：2014年12月29日 14:44:54 投稿：hebedich

這篇文章主要介紹了jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解,需要的朋友可以參考下

用過JavaScript的童鞋，應(yīng)該知道window對象和document對象，也應(yīng)該聽說過load事件和ready事件，小菜當(dāng)然也知道，而且自認(rèn)為很了解，直到最近出了問題，才知道事情并不是那么簡單。

首先說說window和document，直觀上來講，window代表的是瀏覽器窗口，而document代表的是瀏覽器窗口中加載的dom元素，進一步說，document是window的一個屬性，window是最頂級的對象。

二者有啥區(qū)別呢？很好理解，假設(shè)現(xiàn)在有一個瀏覽器，里邊加載的頁面特別長，已經(jīng)超出了一屏，當(dāng)然，肯定會出現(xiàn)滾動條了，這時候，$(window).height()和$(document).height()是不相等的，document的高度肯定要比window的大，因為window窗口始終就是那么大。見下圖：

再說說load事件和ready事件(這里的load和ready是指jQuery的事件，下同)。

先說load，load事件主要就是用來代替原生的window.onload，它只能用在兩個場景下：

· window對象上。比如$(window).load(fn);。

· 帶有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。

除此之外，任何元素都沒有l(wèi)oad事件，比如：$(document).load(fn);這是錯誤的寫法，根本不會執(zhí)行。

load事件需要頁面完全加載完成才可以觸發(fā)，所謂的完全加載完，不僅僅是dom結(jié)構(gòu)加載完，還需要所有的鏈接引用都加載完才可以。比如頁面中有大量圖片，必須等每一個圖片都加載完成，才叫完全加載完。

最重要的還沒說，jQuery官方文檔明確說明load事件的跨瀏覽器兼容性很差(It doesn't work consistently nor reliably cross-browser)。經(jīng)過小菜測試，谷歌瀏覽器僅僅支持$(window).load(fn);，而火狐瀏覽器支持$(window).load(fn);和$(“img”).load(fn);。

所以，除非必要情況下，否則強烈不推薦使用load事件。

最后說說ready，ready事件可以加在任意元素上，比如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。

ready事件不要求頁面完全加載完，只需要加載完dom結(jié)構(gòu)即可觸發(fā)。

ready事件可以同時注冊多個，執(zhí)行時，按照注冊的先后順序執(zhí)行。注意，就算是注冊不同元素的ready事件，也是按照先后順序執(zhí)行。例如下列代碼：

復(fù)制代碼代碼如下:

$(window).ready(function(){

  alert("window");

});

$(document).ready(function(){

  alert("document");

});

$("div").ready(function(){

  alert("div");

});

按照常理，應(yīng)該是div先加載完，所以先執(zhí)行alert("div");，然后才是alert("document");或alert("window");，但遺憾的是，alert("div");是最后一個執(zhí)行的。所以，無論是否在同一元素上注冊ready事件，都是按照注冊的先后順序執(zhí)行。

最后一項，ready事件與window.onload(或<body onload=””>)是沖突的，如果使用了window.onload(或<body onload=””>)，將導(dǎo)致ready事件不執(zhí)行。

經(jīng)過如此多的討論，最終證明：$(document).ready(fn);兼容性、安全性是最好的，如果有此類需求，盡量采用這種方式。

您可能感興趣的文章: