HTMLElement : évènement error
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.
js
addEventListener("error", (event) => { })
onerror = (event) => { }
Type d'évènement
L'objet évènement est une instance de l'objet UIEvent s'il a été généré à partir d'un élément d'interface utilisateur, ou une instance de l'objet Event à la place.
Exemples
Exemple interactif
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>
JavaScript
js
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");
});
Résultat
Spécifications
| Specification |
|---|
| UI Events # event-type-error |
| HTML # event-error |