Other Events

JavaScript 6: Other Events

An event is something which happens in a program which causes it to react. Operating systems like 'Windows' react to events such as a keypress or a movement of the mouse by the user. Web browsers have their own events which can be used by event handlers to take control of the way they behave while a certain document is loaded. The means by which form input is captured is known as a HTML intrinsic event.

onMouseXXXX Events

The onMouse group includes the following events:

onMouseOver - when the user moves the mouse over an object in a document
onMouseDown - when the user presses the mouse button down
onMouseUp - when the user release the mouse button
onMouseOut - when the user moves the mouse out of an object
onMouseMove - when the user moves the mouse
onMouseClick - when the user clicks the mouse button
onMouseDblClick - when the user double clicks the mouse button

These are typically placed inside Anchors to control the response of the browser to user actions through event handlers. Try clicking on these images:

OK Over Out Down Up

The working link reloads the current page but it could point to any other page or a suitable event such as an alert. The dead links use onMouseOver, onMouseOut, onMouseDown and onMouseUp respectively to trap mouse actions and react in certain ways - in this case in the same way! The alert box will not allow the user to do anything until the alert box is closed. The alert, confirm and prompt dialogue boxes are modal, that is they must be dealt with before any other action can take place within the browser.

Here is one sample line which shows how the event is trapped and a function called:

<A HREF="#here" onClick=WorkingLink(this)> <IMG SRC="./lib1.jpg" HEIGHT=80 WIDTH=80></A>

You might populate your screen with images arranged in a table and have each one take an action such as displaying a message, as in the following example:

The Wondrous Latin Picture Dictionary


dog	wolf	lion

Events For Text Boxes

In the last example the text field on a form is used to output a translation of items in pictures which are arranged in a table of anchors. Any anchor can react to the MouseOver event so all the user has to do to test his knowledge is to point at the words he does not know and the Latin will appear in the text field. (Latin is an easy foreign language to use because it has no accented letters.) If we used a TEXTAREA field we could output considerably more text.

These are the events for text boxes:

onFocus - when the user clicks inside a text box
onBlur - when the users clicks outside a text box
onChange - when the contents of a text box change
onSelect - when text in a box is selected

Here the Javascript is called directly from the HTML tag because the code is so short it is not worth calling a function:

<INPUT TYPE="TEXT" NAME="inches" VALUE=1 onChange="this.form.cms.value=this.value*2.54"><P>
<INPUT TYPE="TEXT" NAME="cms" VALUE=2.54 onChange="this.form.inches.value=this.value/2.54">

Notice how this is used to target elements of the FORM. The left side of the expression using this targets the other text input area on the FORM while the right side refers to the immediate text area itself. The left side refers to the object in whose scope the script is running; the right side refers to the INPUT object itself.

The Load and Unload Events

We have already seen these, typically called from the <BODY> tag so that code is run when a page is loaded or unloaded. The unload() event is apparently unreliable and should not be used.

The Submit and Reset Events

The onSubmit() event is run when a Submit button is clicked and causes the whole of a form to be processed. The Reset() event is run when a Reset button is clicked which clears the current form for new input and output. Using a Submit button is the same as using an Input button with onSubmit so there is little point in using the event; the same applies to the Reset button and onReset. Here is an example:

This is the <FORM> header:

And here are the input button tags:

As you can see there is no 'onClick' host, the action results from the button type SUBMIT or RESET. The Submit event picks up actions from the <FORM> tag for its METHOD and ACTION. A typical action is 'POST' and a typical ACTION is a 'mailto:' followed by an email address. In this way you can create forms which send user information to an email address. Any valid URL, such as http, may be used for the ACTION.

Here is an example which implements a FORM for placing orders with a browser:

Return to Javascript Menu

Title (Mr, Mrs., etc.):
Initials and last name:
Address:
House & street:
District: (if applicable):
Town/City:
Postcode:
Email: