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

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

onreadystatechange event | readystatechange event

Browser support:

Occurs when the load state of the data that belongs to an element or a HTML document changes.

The onreadystatechange event is fired on a HTML document when the load state of the page's content has changed.

In Internet Explorer, the onreadystatechange event can also occur on elements. The applet, embed, frame, frameset, iframe, img, input:image, link, script, xml elements support the onreadystatechange event because they load data. Furthermore, since Internet Explorer provides a way to attach external behavior files to any element (behavior style property and addBehavior method), an onreadystatechange event can occur on any element when the load state of an attached behavior file changes.

Use the readyState property in your event handler for the onreadystatechange event to get the current state.

If you need the onreadystatechange event for http requests (AJAX), please see the onreadystatechange event of the XMLHttpRequest object.

How to register:

In HTML:

In JavaScript:

object.onreadystatechange = handler;

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

9

object.attachEvent ("onreadystatechange", 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	No
Cancelable	No
Event object	Event

Actions that invoke the onreadystatechange event:

when the load state of the data changes.

Events related to the onreadystatechange event:

The onload event occurs when the loading process is completed.

Example HTML code 1:

This example illustrates the use of the onreadystatechange event for the document:

<head>
    <script type="text/javascript">
            // Internet Explorer and Opera
        document.onreadystatechange = WaitForComplete;
        
        function WaitForComplete () {
            alert ("The state of the document: " + document.readyState);
        }
        
        function OnLoad () {
            alert ("The document has been loaded.");
        }
    </script>
</head>
<body onload="OnLoad ()">
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the onreadystatechange event for img elements:

<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>