Basic Events in DOM 5

DOM5 HTML Basics – Part 7

Forward: In this part of the series, we look at basic events in DOM 5.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

This is part 7 of my series, DOM5 HTML Basics. In this part of the series, we look at basic events in DOM 5. I assume, you have read the different parts of the series before reaching here; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

What is an Event?
An event is an action that depends on time. When an event is triggered, a response has to handle the event. It is the responsibility of the coder to code the response. We look at the names of basic events and their meanings first, below, before we look at the coding of events.

Event Names and Meanings
onload = script
    The onload event occurs when the browser finish loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
onunload = script
    The onunload event occurs when the browser removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements.
onclick = script
    The onclick event occurs when the mouse button is clicked over an element. This attribute may be used with most elements.
ondblclick = script
    The ondblclick event occurs when the mouse button is double clicked over an element. This attribute may be used with most elements.
onmousedown = script
    The onmousedown event occurs when the mouse button is pressed over an element. This attribute may be used with most elements.
onmouseup = script
    The onmouseup event occurs when the mouse button is released over an element. This attribute may be used with most elements.
onmouseover = script
    The onmouseover event occurs when the mouse is moved onto an element. This attribute may be used with most elements.
onmousemove = script
    The onmousemove event occurs when the mouse is moved while it is over an element. This attribute may be used with most elements.
onmouseout = script
    The onmouseout event occurs when the mouse is moved away from an element. This attribute may be used with most elements.
onfocus = script
    The onfocus event occurs when an element receives focus either by the mouse or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
onblur = script
    The onblur event occurs when an element loses focus either by the mouse or by tabbing navigation. It may be used with the same elements as onfocus.
onkeypress = script
    The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.
onkeydown = script
    The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.
onkeyup = script
    The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements.
onsubmit = script
    The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
onreset = script
    The onreset event occurs when a form is reset. It only applies to the FORM element.
onselect = script
    The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.
onchange = script
    The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Coding Events
An event takes place on an element. To code an event, the event name becomes an attribute (name) in the start tag of the element concerned. This is followed by the equal sign (assignment operator) and then the value of the attribute. The value of the attribute, in this case, is a piece of ECMAScript, which is the response or handler of the event.

ECMAScript Response Statements as Value
The value to the event attribute can be a number of ECMAScript statements, without the start and end script tags, separated by semicolons. Read and try the following code, which displays the result of adding two numbers in response to the onclick event of a button:

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

    <button type="button" onclick="aa=3;bb=4;cc=aa+bb;alert(cc)">Click for Response</button>

</body>
</html>

Function as Response
A response code is also referred to as an event handler. You can place all the response statements for the value in a function. The following code illustrates this:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">

        function resp()
            {
                aa=3;
                bb=4;
                cc=aa+bb;
                alert(cc)
            }

    </script>
</head>
<body>

    <button type="button" onclick="resp()"> Click for Response</button>

</body>
</html>

In this case, the value to the event attribute is just a call to the function.

The alert() Function as Response
You can have just a single alert function call as value to the event attribute. The following code illustrates this:

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

<button type="button" onclick="alert('seen')">Click for Response</button>

</body>
</html>

Here, the alert function call simply displays the word, ‘seen’. This word is in single quotes as argument to the alert function call. The single quotes avoid conflict with the external double quotes of the value to the event attribute.

End of Series
We are at the end of the series, here. The next series, you should read is titled, “DOM Basic Collections”. I hope you appreciated this series.

Chrys

Broad Network

Basic Events in DOM 5

DOM5 HTML Basics – Part 7

Introduction

Related Links

Comments