In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onabort

onabort event | abort event

Browser support:

Occurs when the user aborts the loading of an img or input:image element.

How to register:

In HTML:

In JavaScript:

object.onabort = handler;

object.addEventListener ("abort", handler, useCapture);

9

object.attachEvent ("onabort", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	No
Event object	UIEvent

Actions that invoke the onabort event:

Clicking on the browser's STOP button or pressing ESC while the image is loading.
Navigating to another page while the image is loading.

Events related to the onabort event:

The onreadystatechange event is fired when the load state of an image changes.
The onload event is fired when the loading process is completed.

When the onabort event occurs, the onstop event of the document also occurs.

Example HTML code 1:

This example illustrates the use of the onabort event:

<head>
    <script type="text/javascript">
            // Internet Explorer specific
        function OnAbortImage () {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />The loading of the image has been aborted.";
            RemoveEsc ();
        }

        function OnLoadImage () {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />The image has been loaded.";
            RemoveEsc ();
        }

            // Internet Explorer specific
        function OnStateChangeImage (image) {
            var info = document.getElementById ("info");
            info.innerHTML += "<br />readyState: " + image.readyState;
        }

        function RemoveEsc () {
            var esc = document.getElementById ("esc");
            esc.parentNode.removeChild (esc);
        }
    </script>
</head>
<body>
    <span id="info" style="color:red">The image is loading.</span>
    <br /><br />
    <span id="esc">Press the Escape key to abort the process.</span>
    <br /><br />
    <img src="large.bmp" width="200px" height="150px" 
        onabort="OnAbortImage ()" onload="OnLoadImage ()" onreadystatechange="OnStateChangeImage (this)" />
</body>