Capt. Horatio T.P. Webb
User Events

Events:    Page   HTML Objects    Keyboard   Mouse   Location   Handling

In most cases, scripting in invoked by user "events". This means that the user does something like clicking or selecting on the HTML page. There is a wide variety of the events available in HTML and the events apply only to specific HTML objects. Below is a list of events that provides a description of the event, examples and identifies which HTML objects can be attached to the event.

There are differences in how various browser implemnemt event detection. The most common way to detect and react to events is to attach and event handler to a tag:

<some_tag onevent="the_function_to_execute"...

Here onevent could be any of the events discussed by W3C and shown below:

  • onload = "the_function or in-line code to execute"...

    The onload event occurs when browser finishes loading a window or all frames within a FRAMESET. Used with: BODY, and FRAMESET elements.

  • onunload = "the_function or in-line code to execute"...

    The onunload event occurs when browser removes a document from a window or frame. Used with BODY and FRAMESET elements.

  • onclick = "the_function or in-line code to execute"...

    The onclick event occurs when the mouse button is clicked over an element. Applies to most HTML elements.

  • ondblclick = "the_function or in-line code to execute"...

    The ondblclick event occurs when the mouse button is double clicked over an element. Applies to most elements.

  • onmousedown = "the_function or in-line code to execute"...

    The onmousedown event occurs when the mouse button is pressed over an element. Applies to most elements.

  • onmouseup = "the_function or in-line code to execute"...

    The onmouseup event occurs when the mouse button is released over an element. Applies to most elements.

  • onmouseover = "the_function or in-line code to execute"...

    The onmouseover event occurs when the mouse is moved onto an element. Applies to most elements.

  • onmousemove = "the_function or in-line code to execute"...

    The onmousemove event occurs when the mouse is moved while it is over an element. Applies to most elements.

  • onmouseout = "the_function or in-line code to execute"...

    The onmouseout event occurs when the mouse is moved away from an element. Applies to most elements.

  • onfocus = "the_function or in-line code to execute"...

    The onfocus event occurs when an element receives focus either by the mouse or by tabbing navigation. Applies to: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

  • onblur = "the_function or in-line code to execute"...

    The onblur event occurs when an element loses focus either by the mouse or by tabbing navigation. Applies to: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

  • onkeypress = "the_function or in-line code to execute"...

    The onkeypress event occurs when a key is pressed and released over an element. Applies to most elements.

  • onkeydown = "the_function or in-line code to execute"...

    The onkeydown event occurs when a key is pressed down over an element. Applies to most elements.

  • onkeyup = "the_function or in-line code to execute"...

    The onkeyup event occurs when a key is released over an element. Applies to most elements.

  • onsubmit = "the_function or in-line code to execute"...

    The onsubmit event occurs when a form is submitted. Applies only to the FORM element.

  • onreset = "the_function or in-line code to execute"...

    The onreset event occurs when a form is reset. Applies only to the FORM element.

  • onselect = "the_function or in-line code to execute"...

    The onselect event occurs when a user selects some text in a text field. Applies only to the INPUT and TEXTAREA elements.

  • onchange = "the_function or in-line code to execute"...

    The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. Applies to: INPUT, SELECT, and TEXTAREA.

The the_function_to_execute or in-line code is either a vbscript or javascript function whose code is executed when the event occurs or in-line code placed between the double quotes. This can apply:

  • for a specified HTML tag

    e.g., <img src="catpsm.gif" onclick="set_border()"...

  • for the entire document (i.e., all occurences of the evnt no matter where on the HTML page). This is usually done initially in script in a function called by the onload event. In general it looks lie this:

    document.on = some_function;

    Note in this case you use NO parenthesis. You are not passing arguments -- you are assigning a function to a document-wide event.

  • You can also assign a event to element in script in general like this:

    var el = document.GetElementById("some_element_id");
    el.on = some_function;

    Here "el" is an arbitray variable name for the element; some_element_id is the "id" specified in the HTML tag for the element; is the event you wish to assign (e.g., click, mouseover, etc.); and some_function is the function you wish to execute when the user performs the event action on the specified element (Note: there are NO parentheses)

In most cases these are adequate approaches and will work across the entire spectrum of browser alternatives.

default actions

In the case of some tags (e.g., links, submit and reset buttons) there is a "default action" associated with the tag. For example, a "<a href" tag's "default action" is to load a new page when clicked. Adding an additional event to the tag creates a "sequence of actions". The event handler will be executed first. Then the "default action" will occur. Consider the following code:

<a href="mis3371.htm" onclick="maybe()">go or stay</a>

When the user clicks on the "go or stay" text, the onclick event occurs (i.e., fires) first. Thus the function "maybe" is executed first, then the new page specified in the <a href=... would be loaded. Often, we wish to have the "default action" ignored under certain circumstances. We can accomplish this by adding the statement "return false;" to the onclick string. This causes the "default action" to always be ignored. A "return true;" will allow to default action to occur. In the example above, to prevent the new page from being loaded, we add the "return false;" statement to the tag like this:

<a href="mis3371.htm" onclick="maybe(); return false;">go or stay</a>

No matter what happen in the function named "maybe", the new page is never loaded.

A more realistic version of overriding the "default action" is for the code event executes to decide whether or not to permit the default action. Consider the following javascript code that employs a two-state choice display (See this page for msgbox and alert options):

function sure()
{
var which = confirm ("Click 'OK' to leave or 'Cancel' to stay");
alert ("which is "+which);
return which;
}

The javascript version of the HTML link tag is this:

<a href="mis3371.htm" onclick="return sure();">go or stay&l;/a>

The javascript "sure" function asks a question which gets a click response from the user. Clicking "OK" results in "true" being returned to "which"-- clicking "Cancel" returns "false" to "which". The value of "which" is then returned. In the onclick code, this value is returned and is then returned by the onclick event. Try them below:

go or stay (javascript)

Before we delve in to the modern versions of events, the following examples demonstrate the simplistic versions where the onevent is specified inside the tags. Again, this will work in most every case across all the browsers -- but some consider it offensive because it clutters up our HTML code with javascript. See the section below for the more modern version of event handling.

Cross Browser Events

Both IE and the Mozilla browsers retain information about any event that occurs (i.e., onclick, onmouseover, etc.). For IE we can access the "window.event" or in Mozilla we can access the implicit event object "e" created when the event occurs. The HTML tag for our cross-browser example may look like this:

<some_tag onevent="some_function(event)"...

Note that for IE, "event" has no meaning as events are retained in the window.event object -- for Mozilla this "event" records the initiation of the event. For obtaining access to the event in a cross-browser fashion in the called function we say:

function some_function(e)
{
 if (!e) var e = window.event;
.
.
.

To ascertain whether this is IE or Mozilla, we test. If the function receives the event from "e" (the event created in the Mozilla version) the "e" exists. If not (i.e., it is IE) we access the ebent from the window.event object. After the if statement, "e" is either: the implicit Mozilla event or the window.event -- whichever is appropriate.

EVENTS DETAILS