Document.onreadystatechange - 準備状態が変化した時に発火するイベント

2017/10/06

onreadystatechangeは、Documentのイベントです。ドキュメントの準備状況が変化した時にreadystatechangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。

概要

名前

onreadystatechange

所属

Document

イベント

readystatechange

IDL

[LenientThis] attribute EventHandler onreadystatechange;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);

仕様書

https://html.spec.whatwg.org/multipage/webappapis.html#handler-onreadystatechange

説明

準備状態が変化した時とは、Document.readyStateの値が変化した時です。ドキュメントの準備状態については、そちらのページで説明しています。

チュートリアル

onreadystatechangeでイベントを設定する例です。

document.onreadystatechange = function ( event ) {
	console.log( event ) ;
}

Event.addEventListener()でも、同様にイベントを設定できます。

document.addEventListener( "readystatechange", function ( event ) {
	console.log( event ) ;
} ) ;

デモ

Document.onreadystatechangeのデモです。準備状態が変化するごとに、現在の準備状態を出力します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<div id="result"></div>
<script>
document.onreadystatechange = function ( event ) {
	console.log( event ) ;
	document.getElementById( "result" ).appendChild( new Text( document.readyState + "\n" ) ) ;
}
</script>
</body>
</html>