User Interface Event Types

DOM Event Basics for HTML – Part 1

DOM for HTML

Foreword: This is part 1 of my series, DOM Event Basics for HTML.

By: Chrysanthus Date Published: 7 Jun 2015

Introduction

This is part 1 of my series, DOM Event Basics for HTML. In this part of the series I talk about user interface events for HTML. User Interface refers to how the user interacts with an application; the browser in this case. An event is an action that occurs from the user like clicking an element, or internally from the web page’s DOM. An event is something that happens at a time.

Pre-Knowledge
At the bottom of this page there are links to difference series in the volume, DOM for HTML. You should read all the series in the order given. You should also read the parts of this series in the order given.

onload
The load event refers to the loading of a web page. A browser MUST dispatch this event when the DOM finishes loading the document and any dependent resources (such as images, style sheets, or scripts). Dependent resources that fail to load MUST NOT prevent this event from firing if the resource that loaded them is still accessible through the DOM. If this event type is dispatched, the browser is REQUIRED to dispatch this event at least on the Document node.

You have to write the ECMAScript function that will respond to the event. As the target of the event is the document node, you will call the function in the ECMAScript as follows:

        document.onload = eventFunctionFn(params);

where document is a reference to the document node.

In the following simple code, an alert box is displayed to respond to the event. After display, always click any alert box to dismiss it.

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body>

    

    <script type="text/ecmascript">

        function evFn()
            {
                alert('finished loading');
            }

        document.onload = evFn();

    </script>

</body>
</html>

onunload
A browser MUST dispatch this event when the DOM removes from the environment the resource (such as the document) or any dependent resources (such as images, style sheets, scripts). The document MUST be unloaded by the browser after the dispatch of this event type. If this event type is dispatched, browsers are REQUIRED to dispatch this event at least on the Document node.

The phrase “at least” here means it can also act on other elements. One of the elements it acts on is the body element. To try the following code that illustrates this; you will have to close the window tab of the document (web page).

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body onunload=evFn()>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('document removed');
            }

    </script>

</body>
</html>

Note that the onunload event has been typed as an attribute for the start tag of the body element.

onabort
A browser MUST dispatch this event when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress.

Note: with HTML elements, you type the event as an attribute in the start tag of the element and the event function call as value to the attribute; as in the following image tag:

    <img src="http://www.somesite.com.imag.jpg" onabort=evFn()>

The following code illustrates the response to this event for a very large image. Try the code replacing the src attribute value with that of a real large image, and then while the image is loading, click the stop button of the browser.

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body id='B1'>

    

    <img src="http://www.somesite.com.imag.jpg" onabort=evFn()>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('Loading of image aborted.');
            }

    </script>

</body>
</html>

onerror
A browser MUST dispatch this event when a resource fails to load, or has been loaded but cannot be interpreted according to its semantics (meaning), such as an invalid image, or a script execution error. The following code illustrates this for an image tag whose image does not exist. Note that the event is an attribute in the image tag.

    <img src="http://www.somesite.com.imag.jpg" onerror=evFn()>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('Error in processing resource.');
            }

    </script>

onselect
For the Form input and textarea elements, a browser MUST dispatch this event when a user selects some text. This event is dispatched after the selection has occurred. To see the effect in the following code, you have to select text first in the textarea element. Note that the onselect event has been placed in the start tag of the textarea element.

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body id='B1'>

    <form>
        <textarea cols=50 rows=4 onselect=evFn()>
something something something
        </textarea>
    </form>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('Text has been selected.');
            }

    </script>

</body>
</html>

onresize
When a browser window is not maximized, you can resize it by dragging its edges. A browser MUST dispatch this event when a document view has been resized. This event type is dispatched after all effects for that occurrence of resizing of that particular event target have been executed by the browser.

Browsers, which support continuous reflow of the document's layout during user-initiated resizing, MUST dispatch this event synchronously (one after the other) after each reflow of the document.

The Window object SHOULD always be resizable. Try the following code. To see the effect, you will have to resize the window when it is not maximized. Note that the onresize event is in the start tag of the body element.

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body id='B1' onresize=evFn()>

    

    <script type="text/ecmascript">

        function evFn()
            {
                alert('Window has been resized.');
            }

    </script>

</body>
</html>

onscroll
Vertical and horizontal scrollbars can be found in the window (body element) and other containing elements. A browser MUST dispatch this event when a document view or an element has been scrolled. This event type is dispatched after the scroll has occurred. Try the following code for the body element vertical scroll bar (you have to scroll first):

<!DOCTYPE html>
<html>
<head>
  <title>Illustration</title>
</head>
<body id='B1' onscroll=evFn()>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('A bar has been scrolled.');
            }

    </script>

</body>
</html>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

User Interface Event Types

DOM Event Basics for HTML – Part 1

DOM for HTML

Introduction

Related Links

Comments