Document: readystatechange event
        
        
          
                Baseline
                
                  Widely available
                
                
              
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The readystatechange event is fired when the readyState attribute of a document has changed.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("readystatechange", (event) => { })
onreadystatechange = (event) => { }
Event type
A generic Event.
Examples
>Live example
HTML
html
<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>
CSS
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`;
});
Result
Specifications
| Specification | 
|---|
| HTML> # event-readystatechange>  | 
            
Browser compatibility
Loading…
See also
- Related events: 
DOMContentLoaded,load,beforeunload,unload