#javascript# window.onload 和 $(document).ready()

fantix 發布于2019-08-26 13:56 / 2463人閱讀

摘要：當瀏覽器中所有的資源內容結構文本內容圖片都加載完成，觸發事件。它是基于事件綁定完成的。中提供的方法，是基于這個事件完成這個操作的中的事件綁定都是基于事件綁定完成的但是在下使用也是不支持的，在中使用的是事件處理的。

window.onload

當瀏覽器中所有的資源內容（DOM結構、文本內容、圖片...）都加載完成，觸發load事件。

它是基于DOM0事件綁定完成的。所以在同一個頁面中只能給它綁定一個方法（綁定多個將以最后一個綁定的為主）

如果想在一個頁面中使用多次，我們應該是基于DOM2事件綁定。

function fn1(){
//第一件事
}
function fn2(){
//第二件事
}
window.addEventListener("load",fn1,false);
window.addEventListener("load",fn2,false);

$(document).ready()

$(function(){}) 或者 $(document).ready(function(){})

當文檔中的DOM結構加載完成就會被觸發執行，而且在同一個頁面中可以使用多次。

JQ中提供的方法，JQ是基于DOMContentLoaded這個事件完成這個操作的

JQ中的事件綁定都是基于DOM2事件綁定完成的

但是DOMContentLoaded在IE6~8下使用
attachEvent也是不支持的，JQ在IE6~8中使用的是readystatechange事件處理的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109853.html

jQuery的ready函數源碼解讀

摘要：學習有許多途徑，我們今天從的函數開始。本例中的代碼都來自于腳本庫。我們在通過函數注冊事件處理之前，完成了頁面檢測代碼的注冊。當頁面完全加載之后，我們注冊的函數就被調用了。八參考的函數是如何工作的函數實現原理如果你對$(document).ready()的理解也僅限于在DOM Tree繪制完畢后觸發，那么，你也應該好好研究下ready的工作原理，因為，TST的面試官問過我這個問題。。。...

soasme 2019-08-19 18:34 評論0 收藏0
項目過程中的小學習

摘要：淺灰色呈現該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。在常規的代碼中，通常使用方法，而在中，使用的是方法。方法是事件模塊中最重要一個函數，可以極大的提高應用程序的速度。 1.將多個同類元素分行，每一行有兩個或者多個元素，可用li標簽實現此身高 ...

wua_wua2012 2019-08-02 16:31 評論0 收藏0
項目過程中的小學習

摘要：淺灰色呈現該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。在常規的代碼中，通常使用方法，而在中，使用的是方法。方法是事件模塊中最重要一個函數，可以極大的提高應用程序的速度。 1.將多個同類元素分行，每一行有兩個或者多個元素，可用li標簽實現此身高 ...

william 2019-08-23 11:31 評論0 收藏0
onload事件與ready的區別

摘要：好久沒寫文章了，再來一波，首先上圖參考鏈接與的區別詳見瀏覽器工作原理瀏覽器工作原理前言頁面加載完成有兩種事件一是，表示文檔結構結構已經加載完成不包含圖片等非文字媒體文件，二是，指示頁面包含圖片等文件在內的所有元素都加載完成。好久沒寫文章了，再來一波，首先上圖： showImg(https://segmentfault.com/img/bVLD32?w=1105&h=244); 參考...

mating 2019-08-20 15:33 評論0 收藏0
document.ready和window.onload的區別

摘要：和的區別文檔加載完成事件頁面加載完成有兩種事件一是，表示文檔結構已經加載完成不包含圖片等非文字媒體文件二是，指示頁面包含圖片等文件在內的所有元素都加載完成。即當所有鏈接被鼠標單擊的時候，都執行也就是說頁面加載時綁定，真正該觸發時觸發。 document.ready和onload的區別——JavaScript文檔加載完成事件頁面加載完成有兩種事件：一是ready，表示文檔結構已經加載完...

B0B0 2019-08-23 14:14 評論0 收藏0