このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Document: readystatechange イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
readystatechange event は、文書のreadyState 属性が変化したときに発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名をaddEventListener() などのメソッドで使用するか、イベントハンドラーのプロパティを設定するかしてください。
js
addEventListener("readystatechange", (event) => {});onreadystatechange = (event) => {};イベント型
一般的なEvent です。
例
ライブデモ
HTML
html
<div> <button type="button">再読み込み</button></div><div> <label for="eventLog">イベントログ:</label> <textarea readonly rows="8" cols="30" ></textarea></div>CSS
body { display: grid; grid-template-areas: "control log";}.controls { grid-area: control; display: flex; align-items: center; justify-content: center;}.event-log { grid-area: log;}.event-log-contents { resize: none;}label,button { display: block;}#reload { height: 2rem;}JavaScript
js
const log = document.querySelector(".event-log-contents");const reload = document.querySelector("#reload");reload.addEventListener("click", () => { log.textContent = ""; setTimeout(() => { window.location.reload(true); }, 200);});window.addEventListener("load", (event) => { log.textContent = `${log.textContent}load\n`;});document.addEventListener("readystatechange", (event) => { log.textContent = `${log.textContent}readystate: ${document.readyState}\n`;});document.addEventListener("DOMContentLoaded", (event) => { log.textContent = `${log.textContent}DOMContentLoaded\n`;});結果
仕様書
| Specification |
|---|
| HTML # event-readystatechange |
ブラウザーの互換性
関連情報
- 関連イベント:
DOMContentLoaded,load,beforeunload,unload