Working with event handlers

Events are controlled in JavaScript using event handlers that specify what actions the browser takes in response to an event. Event handlers are created as attributes added to HTML tag in which the event is triggered. The general syntax is:

where tag is the name of the HTML tag, event is the name of the event that occurs within the tag, and JavaScipt commands are the commands the browser runs in response to the event.

The onclick event processing

Switching two lamps on a mouse click:

   

In this example clicking on the button causes calling the lampSwitch() function described below. This function just swaps the URLs of the red and blue lamp images:

<script type="text/javascript">
function lampSwitch() {
   var temp = document.images["left"].src;
   document.images["left"].src = 
       document.images["right"].src;
   document.images["right"].src = temp;
}
</script>
<img src="ballred.gif" name="left" /> &nbsp;
<img src="ballblue.gif" name="right" />
<p>
<form>
<input type="button" value="Switch" 
    onclick="lampSwitch()" />
</form>

opening of JavaScript
function for switching lamps
 saving the left lamp URL
 modifying the right lamp URL

 modifying the left lamp URL
end of function
closing JavaScript
adding the left lamp image
adding the right lamp image
vertical space
operning a form (for the button)
 adding the button
 turning on onclick event handler
closing the form

The onmouseover and onmouseout event processing

These events are widely used in various types of rollover menus. A typical application is shown below:

The JavaScript part of this rollover consists of creating and preloading two sets of buttons images (one for the OFF and ON states), and in two functions RollOver() and RollOut() for replacing the images. The parameter of these functions is the number of the image to handle:

<script type="text/javascript">
var imgOver = new Array();    
for (i=0; i<6; i++) {
    imgOver[i] = new Image(105, 29);
}
    imgOver[0].src = "btn1_about.gif";
    imgOver[1].src = "btn1_contact.gif";
    imgOver[2].src = "btn1_home.gif";
    imgOver[3].src = "btn1_products.gif";
    imgOver[4].src = "btn1_services.gif";
    imgOver[5].src = "btn1_support.gif";

var imgOut = new Array();
for (i=0; i<6; i++) {
    imgOut[i] = new Image(105, 29);
}
    imgOut[0].src = "btn_about.gif";
    imgOut[1].src = "btn_contact.gif";
    imgOut[2].src = "btn_home.gif";
    imgOut[3].src = "btn_products.gif";
    imgOut[4].src = "btn_services.gif";
    imgOut[5].src = "btn_support.gif";

function RollOver(i)
{
  if (document.images)
    document.images[i].src = imgOver[i].src;
}
function RollOut(i)
{
  if (document.images)
    document.images[i].src = imgOut[i].src;
}
</script>

opening JavaScript
creating the first set of images



precaching the images






creating the second set of images



precaching the images






function for turning the image ON




function for turning the image OFF

The HTML part of this application consists of placing the button images and turning on the onMouseOver and onMouseOut event handlers associated with each button:

<a href="http://..." onmouseover="RollOver(0)" onmouseout="RollOut(0)">
<img src="btn_about.gif" width="105" height="29" /></a><br>
<a href="http://..." onmouseover="RollOver(1)" onmouseout="RollOut(1)">
<img src="btn_contact.gif" width="105" height="29" /></a><br>
<a href="http://..." onmouseover="RollOver(2)" onmouseout="RollOut(2)">
<img src="btn_home.gif" width="105" height="29" /></a><br>
<a href="http://..." onmouseover="RollOver(3)" onmouseout="RollOut(3)">
<img src="btn_products.gif" width="105" height="29" /></a><br>
<a href="http://..." onmouseover="RollOver(4)" onmouseout="RollOut(4)">
<img src="btn_services.gif" width="105" height="29" /></a><br>
<a href="http://..." onmouseover="RollOver(5)" onmouseout="RollOut(5)">
<img src="btn_support.gif" width="105" height="29" /></a><br>

If you decide to use this script make sure that the buttons are the very first images on your Web page. Otherwise, correct the array indices in the JavaScript code.

The onchange event processing

This event is initiates whenever a value of any form input element will be changes. For example:

The JavaScript part of this feature demonstrates working with selection fields.

<script type="text/javascript">
function changeColor(selector) {
   var sIndex = selector.selectedIndex;
   if (sIndex > 0) {
      document.bgColor = 
        selector.options[sIndex].text;
   }
}
</script>
Choose background color: 
<select onchange="changeColor(this)">
   <option>-- choices --</option>
   <option>orange</option>
   <option>violet</option>
   <option>white</option>
   <option>green</option>
   <option>#33CC55</option>
   <option>blue</option>
</select>

opening JavaScript
starting a function the changes bgcolor
  get the selected item index
  do nothing for the first one
   reset up the bgcolor
   with the chosen value

closing the function
closing Javacript
starting a form
opening the selection list
  turning on the event handler
  selection options





closing the selection list