HTMLElement : évènement error

Baseline Large disponibilité

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 error de l'interface HTMLElement est déclenché sur un élément lorsqu'une ressource n'a pas pu être chargée ou ne peut pas être utilisée. Par exemple, si un script rencontre une erreur d'exécution ou si une image est introuvable ou invalide.

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

Syntaxe

On utilisera le nom de l'évènement dans des méthodes telles que addEventListener(), ou on définira une propriété gestionnaire d'évènements.

addEventListener("error", (event) => { })

onerror = (event) => { }

HTML

html

<div class="controls">
  <button id="img-error" type="button">Générer une erreur d'image</button>
  <img src="bad-image.jpg" class="bad-img" alt="Je n'existe pas" />
</div>

<div class="event-log">
  <label>Journal d'évènements :</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;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}

JavaScript

const log = document.querySelector(".event-log-contents");

const badImg = document.querySelector(".bad-img");
badImg.addEventListener("error", (event) => {
  log.textContent = log.textContent + `${event.type}: Chargement de l'image\n`;
  console.log(event);
});

const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
  badImg.setAttribute("src", "i-dont-exist");
});