The error
event is fired on an element when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
This event is not cancelable and does not bubble.
SyntaxUse the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("error", (event) => { })
onerror = (event) => { }
Event type
The event object is a UIEvent
instance if it was generated from a user interface element, or an Event
instance otherwise.
<div class="controls">
<button id="img-error" type="button">Generate image error</button>
<img class="bad-img" />
</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>
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 += `${event.type}: Loading image\n`;
console.log(event);
});
const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
badImg.setAttribute("src", "i-dont-exist");
});
Result Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3