Software, Systems, and Solutions

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

Skip Repetitive Navigational Links

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. 
Name:
Email: 
  • 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="S
ubmit"
</FORM>