JavaScript: Events

The JavaScript Event Model exists so that scripts can respond to user actions and change the Web-page accordingly.
Events occur when something happens within the browser window, either when the web page loads or when the user performs some action either with the mouse or the keyboard.
Each event applies to certain elements on the page and some events could apply to multiple elements: the Change event only applies to a drop down menu but the Click event applies to a button and a hyperlink.
JavaScript events that are available on both browsers include:

Abort
Blur
Click
Change
DblClick
Focus
KeyDown

KeyPress
KeyUp
Load
MouseDown
MouseMove
MouseOut
MouseOver

MouseUp
Reset
Resize
Select
Submit
Unolad

The Way Events Work

We capture events and trigger code using an event handler.
- An event handler is typically written as an attribute within the HTML tag for the element you are interested in watching.
- For instance, the following HTML tag defined an event handler for the Click event for a form field button named "clickme".

<input type="button" value="Click Me" 
       onClick="someFunction('message');">

Event handler attributes prepend the letters "on" to the event name; thus an event handler for a Click event is written as onClick.
In the above tag a form field button is created whose script name is "clickme" and which displays the message assigned to value on its face. When a Click event happens at this button calls a JavaScript function named showResults().

LOAD Event

The LOAD event fires whenever an element finishes loading successfully and is often used in the <BODY> tag to initiate scripts as soon as the page has been loaded into the window.
For example: the clock below was started when this page first loaded using the following <BODY> tag:
<BODY VLINK="blue" alink="red" onload=clock()>

Time:

Date:

(see clock.html for clock code)

ERROR Event

The Error event can be used to handle JavaScript errors and display an error message that is more meaningful or less intrusive to the end user.
To specify that an error handling function (handleError) should execute whenever a JavaScript error occurs in the browser window:
window.onerror = handleError;
The error handling function could have the following form (return true cancels the browser's reaction):
function handleError(errType, errURL, errLNum)
{
   window.status = "Error: " + errType +
       " on line " + errLNum;
   return true;
}

onMouseOver and onMouseOut

The onMouseOver and onMouseOut events are used to generate dynamic events when a user's mouse passes over a link, an image or other HTML element.
For example: Status bar messages can be initiated when the user moves the mouse over a link:
Yahoo

<a href="http://www.yahoo.com"
onMouseover="window.status='Click for Yahoo!';
return true" onMouseout="window.status=''">
Yahoo</a>

Or you can "highlight" the link when the moue passes over it:

Link to News with color change onmouseover & onmouseout

function overFunc(a)
{
event.srcElement.style.color = "red";
event.srcElement.style.background = "ffCCCC";
}

function outFunc(a)
{
event.srcElement.style.color = "#3333FF";
event.srcElement.style.background = "#ccccff";
}
<a href="../News"
onMouseover="overFunc()"
onMouseout="outFunc()">Link to ...</a>

Or you can use images as your links and "swap" images to get a dynamic effect when your mouse passes over the link:

<SCRIPT LANGUAGE = "Javascript">
image1 = new Image();     // Creating the image
image1.src = "click1.gif"; // & loading the files
image1on = new Image();   // preloads the images
image1on.src = "click2.gif"; // reducing delays

function on(name) {    //replace original image
document[name].src = eval(name + "on.src");
}
function off(name) {   //restore original image
document[name].src = eval(name + ".src");
}
</SCRIPT>
<center>
<A HREF="loan.html" onmouseover="on('image1');"
   onmouseout="off('image1')">
<IMG SRC="click1.gif" WIDTH=110 HEIGHT=30
       BORDER=0 NAME="image1">
</A></center>

ONFOCUS and ONBLUR

The onFocus and onBlur events are most often used when dealing with forms.
The onFocus event fires when a control gets focus. The onBlur event fires when the element looses focus.
Can be used to display "Help" text on the status bar:

Name:
<input type="text" onFocus="window.status= 'Enter First & Last Names'; return true;" onBlur="window.status=''; return true;">
Can be used to make a read only text field (one that can display results but does not allow user input).

Output:
<input type="text" onFocus="this.blur()">

ONSUBMIT and ONRESET

Two more events that are useful when dealing with forms are onSubmit and onReset. These events fire when the form is submitted or reset respectively.
One use for onSubmit is to allow error checking on the form prior to it being submitted. If there are errors on the form the submit action can be cancelled.
onSubmit can also be used to redirect the browser to a confirmation page when the form is submitted successfully.

Here is the code that generates the form above:



<SCRIPT> LANGUAGE="JavaScript">
   


<!--
   


function  valid(myform)  

  {

  
   
  var field1 = myform.name; 

   
  var field2 = myform.email;

  
  

   
      
  if  (!field1.value) {
   

      alert("You must provide a
  name.");

     
    return false;  // form not submitted 
  

    }

     else if  (field2.value.indexOf("@")
  == -1){
   

      alert("Enter a valid e-mail
  address");

      
    return false;  // form not submitted   
    

     }

     else  {
  // redirect browser to thank you page

window.location = 'thankyou.html';   
      

          return true;  // form submitted

      }    


}
    
// -->
    


</SCRIPT>
  

    

<FORM METHOD="POST"  

      ACTION="mailto:you@yourdomain.com"



        

 ENCTYPE="text/plain"

onSubmit="return valid(this)">
    

  Name: <INPUT TYPE="text" NAME="name"><BR>

  Email: <INPUT TYPE="text" NAME="email"> 

<INPUT TYPE="submit" VALUE="Submit"> 

</FORM>

Software, Systems, and Solutions

"We do not run your business. We make your business run better."

S CUBED