Document: readystatechange event

addEventListener("readystatechange", (event) => { }) onreadystatechange = (event) => { } 

<div class="controls"> <button id="reload" type="button">Reload</button> </div> <div class="event-log"> <label for="eventLog">Event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog"></textarea> </div> 

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; } 

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`; });