References

Beginner-friendly references for web development, with live, editable examples.

The HTML onabort event

Event All modern browsers Updated
Quick answer

The HTML onabort attribute runs JavaScript when loading of a resource (such as media or an image) is aborted. It is an inline handler for the abort event; in modern code prefer addEventListener('abort', …).

Overview

The onabort event attribute runs JavaScript when resource loading is aborted. In JavaScript the event itself is named abort — drop the on prefix when you call addEventListener.

It is a resource-loading event, fired as the page or an individual resource (an <img>, <script>, <iframe> or the document) loads, fails or is aborted.

You can wire this up with the inline onabort HTML attribute, but the modern, recommended approach is element.addEventListener('abort', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onabort="handler()">…</element>

element.addEventListener('abort', handler);

Best practices

  • Prefer element.addEventListener('abort', handler) over the inline onabort attribute — it separates behavior from markup and allows multiple handlers.
  • Use it to react to load success or failure — for example showing a fallback when an image fails.
  • Attach it before the resource starts loading so you do not miss an early event.
  • For the window load, prefer deferring non-critical work rather than blocking on it.

Frequently asked questions

What is the onabort event?
It runs JavaScript when resource loading is aborted. In JavaScript the event is named abort.
When does this event fire?
As a resource or the page finishes loading, fails to load, or has its loading aborted.
How do I handle an image that fails to load?
Listen for the error event on the <img> and swap in a fallback.
Should I use the onabort attribute or addEventListener?
Prefer addEventListener('abort', …) in JavaScript. The inline onabort attribute works but mixes behavior into the markup and allows only one handler per element.
onafterprint