onreadystatechange - ロードのステータスが変化した時に発火する

投稿日:

JavaScriptの、イベントハンドラのonreadystatechangeは、ロードのステータスに変化があった時に発火して処理を実行します。

説明

イベントハンドラのonreadystatechangeは、ロードのステータスに変化があった時に発火します。ブラウザはDOMの解析(loading)、画像などサブリソースの読み込み(interactive)、そして完了(complete)と、段階を経てHTMLドキュメントを表示します。表にすると下記の通りです。

項目説明
loadingDOMの解析中。
interactive画像などサブリソースの読み込み中。
complete全ての読み込みが完了。

これらの段階、すなわち、ロードのステータスの変化をキャッチして、そのタイミングで処理を実行してくれるのがこのonreadystatechangeというイベントハンドラです。ちなみに現在のステータスを知るにはdocument.readyStateを参照します。

サンプルコード

// 処理を定義
var action = function() {
	// 処理内容
}

//　イベントを設定 ( addEventListener )
document.addEventListener( "readystatechange", action ) ;

// イベントを削除
document.removeEventListener( "readystatechange", action ) ;
// イベントを設定 ( onreadystatechange )
document.onreadystatechange = function() {
	// 処理内容
}

// イベントを削除
document.onreadystatechange = null ;

デモ

iframe内のドキュメントにonreadystatechangeイベントを設定しました。ロードのステータスはDOMの解析中(loading)から始まり、サブリソースの読み込み中(interactive)、読み込み完了(complete)という順で変化するので、イベントは2回、発火します。

関連項目

外部リンク