Document: readystatechange event

<div class="controls"> <button id="reload" type="button">Reload</button> </div> <div class="event-log"> <label>Event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></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 = ""; window.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`; });