ready 事件的實現機制

2021-07-15 18:22:40 字數 1172 閱讀 3453

.ready()用於在document物件上繫結乙個ready事件監聽函式,當dom結構載入完成後,監聽函式被執行

ready 作用於dom結構載入完成時,瀏覽器如何解析前端檔案? 因此先了解什麼是dom結構?

瀏覽器如何解析檔案(這裡只大概介紹渲染的流程)

什麼是dom結構

dom把整個頁面對映為乙個多層節點結構,在解析html檔案時,直譯器將乙個個節點構造為一棵樹。節點的基本型別為node。docuemnt型別表示整個文件,是一組分層節點的根節點。

判斷dom樹何時載入完畢

對ie9+和其他瀏覽器中繫結domcontentloaded事件

document.addeventlistener(「domcontentloaded」, fun, false);

在ie9以下的瀏覽器繫結onreadystatechange事件。

document.addeventlistener(「onreadystatechange」, fun, false);

當屬性 document.readystate的值改變時,onreadystatechange事件被觸發。

readystate 屬性返回當前文件的狀態(載入中……),返回以下值:

* uninitialized - 還未開始載入

* loading - 載入中

* interactive - 已載入,文件與使用者可以開始互動

* complete - 載入完成

if(document.readystate === 『complete』) fun();

在ie9以下的瀏覽器中還有一種技巧是不停地執行document.documentelement.doscroll(『left』);直到不丟擲異常為止。

doscroll方法是ie特有的,在dom未載入完成時,呼叫此方法就會丟擲異常,所以週期性的呼叫此方法,當不丟擲異常時,可以判定dom載入完畢。

這裡只是一些總結,在使用使用方式方面不是很詳細,而且也不用糾結doscroll 究竟是幹什麼的,畢竟在這裡這只是一種判定方式而已。有的人說doscroll是滾動頁面,這四個字我難以理解,畢竟即使dom樹載入完畢,但渲染未完成,頁面又如何滾動,而且 document.documentelement.doscroll(『left』);作用於x軸,如何滾動???

jqurey事件 ready用法

事件方法會觸發匹配元素的事件,jqurey事件 ready用法或將函式繫結到所有匹配元素的某個事件。ready 在文件載入後啟用函式 this is a paragraph.btn1 toggle jqurey事件 ready用法 複製 定義和用法 當 dom 文件物件模型 已經載入,並且頁面 包括...

jQuery 事件 ready 方法

在文件載入後啟用函式 document ready function 定義和用法 當 dom 文件物件模型 已經載入,並且頁面 包括影象 已經完全呈現時,會發生 ready 事件。由於該事件在文件就緒後發生,因此把所有其他的 jquery 事件和函式置於該事件中是非常好的做法。正如上面的例子中那樣。...

jQuery中ready與load事件的區別

1 2 3 4 5 6 7 8 document ready document ready function document ready 簡寫 function 有些時候也會這麼寫 1 2 3 4 document load document load function 乙個是ready乙個是lo...