HTMLElement : évènement error

L'évènementerror de l'interfaceHTMLElement 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 queaddEventListener(), ou on définira une propriété gestionnaire d'évènements.

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

Type d'évènement

L'objet évènement est une instance de l'objetUIEvent s'il a été généré à partir d'un élément d'interface utilisateur, ou une instance de l'objetEvent à la place.

Exemples

Exemple interactif

HTML

html

<div>  <button type="button">Générer une erreur d'image</button>  <img src="bad-image.jpg" alt="Je n'existe pas" /></div><div>  <label>Journal d'évènements :</label>  <textarea    readonly       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;}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");});