Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Document : évènement readystatechange

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'évènement readystatechange de l'interface Document est déclenché lorsque l'attribut readyState d'un document a changé.

Cet événement n'est pas annulable et ne se propage pas.

Syntaxe

Utilisez le nom de l'événement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'événements.

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

onreadystatechange = (event) => { }

Type d'évènement

Un objet Event générique.

Exemples

Exemple interactif

HTML

html
<div class="controls">
  <button id="reload" type="button">Recharger</button>
</div>

<div class="event-log">
  <label for="eventLog">Journal des évènements&nbsp;:</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`;
});

Résultat

Spécifications

Specification
HTML
# event-readystatechange

Compatibilité des navigateurs

Voir aussi