Element: error event
The error
event is fired on an Element
object 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.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("error", (event) => {});
onerror = (event) => {};
Event type
Examples
Live example
HTML
<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>
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
Specification |
---|
UI Events # event-type-error |
Browser compatibility
BCD tables only load in the browser
See also
- This event on
Window
targets:error
event