Chapter 5

Events in JavaScript

CONTENTS

• What Are Events?
• What Are Event Handlers?
  • this Keyword
  • Which Event Handlers Can Be Used?
• Emulating Events
• Using the onLoad and onUnload Event Handlers
• Web-Hopping with window.open()
• Resetting Event Handlers
• Events and Forms
  • Common Form Events
  • Other Form Events
  • Using Event Handlers with Form Tags
• An Interactive Calculator
• Summary
• Commands and Extensions Review
• Q&A
• Exercises
• Answers

Now that you know how to organize programs using functions and build your own objects, you are ready to take a look at events.

Events provide the basis of interacting with the Navigator window and the currently loaded document. Events are triggered in the browser primarily by user actions, including finishing loading a page, entering data in a form, and clicking on form buttons.

Using event handlers built into JavaScript, you can write functions to perform specific actions based on the occurrence of selected events.

In this chapter, we will cover:

• What events are
• What event handlers are
• How to use event handlers
• How to emulate events
• The load and unload events and the onLoad and onUnload event handlers
• The basics of using events to interact with forms

What Are Events?

Events are signals generated when specific actions occur. JavaScript is aware of these signals, and scripts can be built to react to these events.

Examples of events include when a user clicks on a hypertext link, changes data in a form entry field, or when a page finishes loading. A complete list of the events available in JavaScript appears in Table 5.1.

Input focus refers to the act of clicking on or in a form element or field. This can be done by clicking in a text field or by tabbing between text fields.

What Are Event Handlers?

In order to take advantage of events in JavaScript, it is necessary to use event handlers. Event handlers are scripts, in the form of attributes of specific HTML tags, which you as the programmer can write.

The event handlers you write are executed when the specified events occur. The basic format of an event handler is:

<HTML_TAG OTHER_ATTRIBUTES eventHandler="JavaScript Program">

While any JavaScript statements, methods, or functions can appear inside the quotation marks of an event handler, typically, the JavaScript script that makes up the event handler is actually a call to a function defined in the header of the document or a single JavaScript command. Essentially, though, anything that appears inside a command block (inside curly braces ({})) can appear between the quotation marks.

For instance, if you have a form with a text field and want to call the function checkField() whenever the value of the text field changes, you could define your text field as follows:

<INPUT TYPE="text" onChange="checkField(this)">

Nonetheless, the entire code for the function could appear in quotation marks rather than a function call:

<INPUT TYPE="text" onChange="
  if (parseInt(this.value) <= 5) {
    alert('Please enter a number greater than 5.');
  }
">

To separate multiple commands in an event handler, use semicolons, as shown in the following lines:

<INPUT TYPE="text" onChange="
  alert('Thanks for the entry.');
  confirm('Do you want to continue?');
">

The advantage of using functions as event handlers, however, is that you can use the same event handler code for multiple items in your document and, (as you saw earlier in Chapter 4, "Functions and Objects-The Building Blocks of Programs") functions make your code easier to read and understand.

For instance, you may have a form with several text entry fields and in each, the user can only enter numbers. You could use an event handler to check the value of any field if the content changes. By having a single function to check the value of a field, you don't have to write the complete code in the event handler for each text field.

this Keyword

Notice in the examples in the preceding section that you used the this keyword which you first encountered when you learned to build your own objects in Chapter 4.

The this keyword refers to the current object. In the case of

<INPUT TYPE="text" onChange="checkField(this)">

this refers to the current field object. In JavaScript, forms are objects and, as you'll learn in Chapter 6, "Creating Interactive Forms," they have objects for each element as properties. These form elements include text fields, checkboxes, radio buttons, buttons, and selection lists.

Which Event Handlers Can Be Used?

The names of event handlers are directly connected to the events introduced earlier in the chapter. For instance, the click event is associated with the onClick event handler, and the load event with the onLoad event handler.

Table 5.2 outlines which window and form elements have event handlers available to them. All of these elements are dealt with later in this book when we cover forms, the document object, and the window object (see Chapter 8, "Frames, Documents, and Windows").

Emulating Events

In addition to event handlers, it is possible to emulate events. This can prove particularly useful to submit a form without requiring the user to click on a submit button or to force the input focus into a particular form field based on user actions.

For instance, if a clothing company has on its Web site an on-line order form for ordering designer clothes and it wants to ensure that the users provide a name, address, phone number, and fax number before sending the order to the company's server for processing, then using event emulation could be useful.

When a user fills in the form and clicks on the Order button, a JavaScript script could then check if the form is correctly filled out. If it is, then it could emulate a submit event to cause the content of the form to be sent to the company's server.

On the other hand, if there is a missing piece of information, the script could alert the user and then emulate a focus event to put input focus into the text field in question.

The following list outlines the event methods available in JavaScript.

• blur()
• click()
• focus()
• reset()
• select()
• submit()

It is important to note that events generated with these methods do invoke their corresponding event handlers. This can lead to infinite loops, as illustrated in the following script:

<HTML>

<HEAD>
<TITLE>Events</TITLE>

<SCRIPT>
<!-- HIDE FROM OTHER BROWSERS

function react(field) {

  alert("Please Enter a Value");
  field.focus();

}

// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY>

<FORM METHOD=POST>
<INPUT TYPE=text NAME=stuff onFocus="react(this);">

</FORM>

</BODY>

</HTML>

You can see that because field.focus() invokes the onFocus event handler, you face a situation of infinite recursion with react() being continually called until it caused Navigator 2 to crash.

Using the onLoad and onUnload Event Handlers

The first events you will learn to work with are load and unload. The load event is generated when a page has completed loading. Likewise, the unload event occurs when the user exits a page.

The onLoad and onUnload event handlers enable you to script JavaScript program code to execute at these times. The onLoad event handler, for instance, enables you to be sure a page, including associated graphics, has loaded completely before executing the event handler.

This ability to control the timing of certain actions is important. For instance, if you want an alert message to appear after a page has loaded, it would be simple to place a script at the end of the HTML file. However, it is still possible for the alert box to appear before the page, particularly one containing in-line graphics, has completely loaded and been displayed on the screen.

The onLoad event solves that problem. Similarly, onUnload enables a script to be executed before a new page loads.

The onLoad and onUnload events are used as an attribute of the BODY HTML tag. For instance, in this line:

<BODY onLoad="hello()" onUnload="goodbye()">

the function hello() is executed after the page is loaded and goodbye() is called when the page is exited.

In Listing 5.1, you simply generate a welcome message after a page has loaded and generate a farewell message when the user decides to move on to another page.

Listing 5.1. Using the onLoad and onUnload event handlers.

<HTML>

<HEAD>
<TITLE>Example 5.1</TITLE>
</HEAD>

<BODY onLoad="alert('Welcome to my page!');"
  onUnload="alert('Goodbye! Sorry to see you go!');">


<IMG SRC="title.gif">

</BODY>

</HTML>

This script produces results similar to Figure 5.1.

Figure 5.1 : The onLoad event handler generates this alert box.

This script provides a simple example of how event handlers are used.

Once the page has completed loading, the onLoad event handler causes the welcome alert dialog box to be displayed. Then, when the user leaves the page, such as by opening another URL, the good-bye dialog box is displayed by the onUnload event handler.

You could expand and personalize this script as you did in using the prompt() method in the "Welcome to Netscape Navigator" examples earlier:

<HTML>

<HEAD>
<TITLE>Example 5.1</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS

var name = "";

// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY onLoad="
          name = prompt('Enter Your Name:','Name');
          alert('Greetings ' + name + ', welcome to my page!');"
      onUnload=" alert('Goodbye  ' + name + ', sorry to see you go!');">

<IMG SRC="title.gif">

</BODY>

</HTML>

Likewise, you could use functions for this script to make it easier to read:

<HTML>

<HEAD>
<TITLE>Example 5.1</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS

// DEFINE GLOBAL VARIABLE
var name = "";

function hello() {
  name = prompt('Enter Your Name:','Name');
  alert('Greetings ' + name + ', welcome to my page!');
}

function goodbye() {
  alert('Goodbye ' + name + ', sorry to see you go!');

}

// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY onLoad="hello();"  onUnload="goodbye();">


<IMG SRC="title.gif">

</BODY>

</HTML>

Web-Hopping with window.open()

In this example, you take a closer look at using the onLoad event handler for a more complex task. You are going to produce a random page. That is, when the user comes to the page, a "Please Wait_Selecting Destination" message is displayed and shortly after that, a randomly selected site from the Internet is loaded in a new window. In Listing 5.2, the program chooses from a list of five possible sites to jump to.

In order to achieve this, you need to use a new method: window.open(). The window.open() method takes two required arguments:

window.open("URL","window name")

The window.open() method is covered in more detail in Chapter 8 where we also discuss a third argument available for the window.open() method. For this example, you need to ensure that the window you open the URL in is the same one your message appeared in. Because you don't know how many windows are currently open when the user opens your Web page, you will open both the message and the subsequent URL in a new window by using window.open("URL","new_window_name").

Listing 5.2. A random page selector.

<HTML>

<HEAD>
<TITLE>Example 5.2</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS

function urlList(a,b,c,d,e) {
  // DEFINE FIVE-ELEMENT OBJECT
  this[0] = a;
  this[1] = b;
  this[2] = c;
  this[3] = d;
  this[4] = e;
}

function selectPage(list) {
  // SELECT RANDOM PAGE
  var today = new Date();
  var page = today.getSeconds() % 5;


  // OPEN PAGE
  window.open(list[page],"Random_Page");

}

// DEFINE SELECTION LIST
choices = new urlList("http://www.yahoo.com",
                      "http://www.cnn.com",
                      "http://www.dataphile.com.hk",
                      "http://home.netscape.com",
                      "http://www.landegg.org/landegg");

// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY onLoad = "selectPage(choices);">
<H1>
<HR>
Please Wait ... Selecting Page.
<HR>
</H1>
</BODY>

</HTML>

In this example you learn several useful techniques. The script is built out of two functions and a main body of JavaScript code. The function urlList() is an object constructor used to build an array of five URL strings. It takes five arguments and builds a five-element array.

You will notice that you don't use any property names in defining the object, but instead use numeric indexes to reference each of the five properties. This is done because you will only be using numeric references throughout the script to access the URLs in the array.

The selectPage() function is a little more complex. The function generates a pseudo-random number by calculating the number of seconds modulo five. This produces an integer in the range of zero to four:

  var today = new Date();
  var page = today.getSeconds() % 5;

This number is then used in the command window.open(list[page],"Random_Page") to open the selected page in a new window called Random_Page.

Following the two functions, you define the five sites you have to choose from and store them in an array called choices. You use the constructor function urlList() to create the array.

Finally, the script contains a good example of using the onLoad event handler. The message Please Wait... Selecting Page. is displayed in the original browser window and then selectPage() is called from the event handler. For users on slower dial-up connections, the message may display for a few seconds, and users on fast direct connections may barely have time to see the message.

Resetting Event Handlers

Starting with Navigator 3.0, it is possible to explicitly reset event handlers in a script. That is, you can change the expression to be evaluated when an event occurs.

This is possible when the new expression to be evaluated takes the form of a function call. For instance, if the onClick event handler in the <INPUT> tag of the form thisForm is defined as

<INPUT TYPE=button NAME="thisButton" onClick="firstFunction()">

then, a script could subsequently change the event handler to call secondFunction() by assigning the function name to document.thisForm.thisButton.onclick:

document.thisForm.thisButton.onclick = secondFunction;

Subsequent clicks on the button would launch secondFunction() instead of firstFunction().

Events and Forms

Now that you understand the basics of events, let's take a look at working with forms.

Today, most JavaScript programmers are using forms and event handlers to produce complex applications. The events generated by forms provide a fairly complete set of tools for reacting to user actions in forms.

Common Form Events

The most common events used for processing forms are the focus, blur, and change events with their corresponding event handlers onFocus, onBlur, and onChange. Using these events, it is possible for a program to keep track of when a user moves between fields in a form and when he or she changes the value of an input field.

Other Form Events

There are other events available in forms, which we will cover in Chapter 6 when we take a detailed look at working with forms. These include click and submit with their corresponding onClick and onSubmit event handlers.

Using Event Handlers with Form Tags

Event handlers are included as attributes of form and field tags. For instance, the following tag defines a text input field with three event handlers.

<INPUT TYPE=text NAME="test" VALUE="test"
       onBlur="alert('Thank You!');"
       onChange="check(this);">

When the user moves the focus out of the field by clicking anywhere outside the field (or using the tab button where there are multiple text fields in a form), an alert dialog box with the message Thank You! is displayed.

When the value of the field is changed, the function check() is called. This function would be defined elsewhere in the HTML page-probably in the header. Note the use of the this keyword to pass the current field object to the function.

You first saw the this keyword in Chapter 4, when you learned to build constructor functions. The this keyword refers to the current object. In the case of an event handler, this refers to the object the event handler applies to. For instance, in a form field definition, this refers to the object for the form element (which we discuss in Chapter 6 in detail). You can then refer to properties and methods for the current object as this.methodName() or this.propertyName.

An Interactive Calculator

In this example, you will use event handlers and text input fields to produce a simple calculator. You will use a form that consists of two fields: one for the user to enter a mathematical expression and another for the results to be displayed.

If the user moves the focus into the results field, a prompt dialog box is displayed asking the user for a mathematical expression which is then displayed in the entry field with the evaluated result in the results field.

You already have learned all the methods, properties, and event handlers necessary to produce the script in Listing 5.3.

Listing 5.3. Using event handlers to create a JavaScript calculator.

<HTML>

<HEAD>
<TITLE>Example 5.3</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS

function calculate(form) {

  form.results.value = eval(form.entry.value);

}

function getExpression(form) {

  form.entry.blur();
  form.entry.value = prompt("Please enter a JavaScript mathematical
expression","");
  calculate(form);

}


// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY>

<FORM METHOD=POST>
Enter a JavaScript mathematical expression:
<INPUT TYPE=text NAME="entry" VALUE=""
       onFocus="getExpression(this.form);">
<BR>
The result of this expression is:
<INPUT TYPE=text NAME="results" VALUE=""
       onFocus="this.blur();">

</FORM>

</BODY>

</HTML>

This script produces results similar to Figure 5.2.

Figure 5.2 : When a user enters an expression, the result is calculated and displayed.

There are several techniques employed in this script that are worth noting. In the HTML form, you have two fields, each with a single event handler. The entry field has an onFocus event handler which calls the function getExpression(), which handles the input of the expression. Notice that the function is passed this.form as an argument. Where this refers to the object for the current field in the HTML form, this.form refers to the object for the form containing the current field.

The second field's onFocus event handler calls this.blur() which immediately removes focus so that the user cannot alter the contents of the field. Remember that on some platforms, the cursor will actually appear in the field, but the user will be unable to enter information.

The getExpression() function takes a single form object as an argument. The first thing it does is remove focus from the entry field. You do this so you don't get into an infinite loop with the prompt dialog box. If you don't, then focus is removed from the field when the dialog box appears and returns to the field when the dialog box closes. This triggers another focus event and would invoke the event handler again.

After you remove focus from the entry field, you prompt the user for an expression and store the results in the entry field to display them. Then you call the function calculate() and pass it the form object.

The calculate() function uses the eval() function to calculate the result of the expression in the entry field and displays the result in the appropriate field in the form.

Throughout both functions, you will notice that you can refer to particular fields in a form as properties of the form object:

formObjectName.fieldname

Likewise, you can directly address and change the value of a field by using its value property (remember that while fields are properties of the form object, they are objects in their own right with properties of their own):

formObjectName.fieldname.value

It is also important to realize that with JavaScript, authors often want to create forms that actually do not submit any data back to the server with the ACTION attribute of the FORM tag. For instance, a JavaScript application may implement a simple currency calculator that uses HTML forms for its interface. All calculations and displaying of the results are done by a JavaScript script, and the contents of the forms never need to be sent to the server.

To accommodate this use of forms, it is sufficient to have no attributes in the FORM tag or to simply have the METHOD=POST attribute without an ACTION attribute in the FORM tag.

Summary

In this chapter, you have made a big step toward being able to write the type of interactive Web pages and scripts that JavaScript is widely used for today.

You learned about events and event handlers. Event handlers react to actions by the user or events generated by the browser. Scripts can also emulate many events such as the click() method and submit() method.

In particular, you used the onLoad and onUnload event handlers to react to the loading of the page and the user's opening another URL. You also began to look at events in relationship to HTML forms and learned to use onFocus, onBlur, and onChange.

In Chapter 6, you look at the form object in more detail and work more with the events and event handlers in relationship to forms.

Commands and Extensions Review

Q&A

Q	Can I ensure my page elements, including large graphics and tables, have been displayed before the onLoad script is executed?
A	Yes. onLoad is executed when all elements of the page have been loaded and displayed.
Q	You used getSeconds() to simulate a random number. I have seen a random number method in other languages such as Perl. Does JavaScript have one?
A	Yes. Beginning with Navigator 3.0, JavaScript has the Math.random () method.

Exercises

1. Which of the following are legitimate uses of event handlers?
   a.  <BODY onClick="doSomething();">
   b.  <INPUT TYPE=text onFocus="doSomething();">
   c.  <INPUT TYPE=textarea onLoad="doSomething();">
   d.  <BODY onUnload="doSomething();">
   e.  <FORM onLoad="doSomething();">
   f.  <FORM onSubmit="doSomething();">
2. What happens with the following script?
   <HTML>
   
   <HEAD>
   <TITLE>Exercise 5.2</TITLE>
   
   <SCRIPT LANGUAGE="JavaScript">
   <!-- HIDE FROM OTHER BROWSERS
   
   var name = "";
   
   function welcome() {
   
     name = prompt("Welcome to my page! What's Your Name?","name");
   
   }
   
   function farewell() {
   
     alert("Goodbye " + name + ". Thanks for visiting my page.");
   
   }
   
   // STOP HIDING FROM OTHER BROWSERS -->
   </SCRIPT>
   
   </HEAD>
   
   <BODY onLoad="welcome();" onUnload="farewell();";>
   
   <IMG SRC="welcome.gif">
   
   </BODY>
   
   </HTML>
3. Create an HTML page and JavaScript script that include a form with three input fields. The relationship of the value of the fields is that the second field is twice the value of the first field, and the third field is the square of the first field.
   If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields.

Answers

1. Lines b, d, and f are valid according to Table 5.2. Choices a, c, and e all use event handlers which are not available for the particular objects in question.
2. The script welcomes the user and asks for a name after the page (and graphic) have loaded. When the user moves on to another URL, a good-bye message is displayed in an alert dialog box. Results would be similar to Figures 5.3 and 5.4.
   

   Figure 5.3 : The prompt dialog box is displayed only after the page has finished loading.

   Figure 5.4 : Leading another Web page triggers the farewell() function and this alert box.

3. The following script would achieve the desired results:
   
   <HTML>
   
   <HEAD>
   <TITLE>Exercise 5.3</TITLE>
   
   <SCRIPT>
   <!-- HIDE FROM OTHER BROWSERS
   
   function calculate(form) {
   
     form.twice.value = form.entry.value * 2;
     form.square.value = form.entry.value * form.entry.value;
   
   }
   
   // STOP HIDING FROM OTHER BROWSERS -->
   </SCRIPT>
   
   </HEAD>
   
   <BODY>
   
   <FORM METHOD=POST>
   
   Value: <INPUT TYPE=text NAME="entry" VALUE=0
                 onChange="calculate(this.form);">
   <BR>
   Double: <INPUT TYPE=text NAME="twice" VALUE=0
                  onChange="this.form.entry.value = this.value / 2;
             calculate(this.form);">
   <BR>
   Square: <INPUT TYPE=text NAME="square" VALUE=0
                  onChange="this.form.entry.value = Math.sqrt(this.value);
             calculate(this.form);">
   
   </FORM>
   
   </BODY>
   
   </HTML>
   This script page produces results similar to those in Figure 5.5.

Figure 5.5 : The onChange event handler calculates and updates fields.

Notice the use of the this.form argument again in the calls to the calculate() function. In addition, the onChange event handlers for both the double and square fields have multiline scripts for their event handlers. The semicolons separate the lines of the script, even though the script appears on a single physical line.

The onChange event handlers in both the double and square fields first calculate the value of the entry field and then call calculate() which calculates the value of both double and square based on the value of the entry field. While this technique works, it has a couple of problems.

First, you end up replacing the value the user has entered in the double or square field with a new value calculated when you call calculate(). This is an extra, unnecessary step.

Second, due to limitations in floating-point calculations, it is possible that if a user enters a value in the square field, for example, the result of calculating the square root and then recalculating the value of the square field may produce a result slightly different from the original value the user entered.

This can be remedied with the following script. At first glance, these changes make the script seem more complex, but they stop the script from calculating the value the user has just entered, preventing both these problems.

<HTML>

<HEAD>
<TITLE>Exercise 5.3</TITLE>

<SCRIPT>
<!-- HIDE FROM OTHER BROWSERS

function calculate(form,currentField) {

  if (currentField == "square") {
    form.entry.value = Math.sqrt(form.square.value);
    form.twice.value = form.entry.value * 2;
  } else if (currentField == "twice") {
    form.entry.value = form.twice.value / 2;
    form.square.value = form.entry.value * form.entry.value;
  } else {
    form.twice.value = form.entry.value * 2;
    form.square.value = form.entry.value * form.entry.value;
  }

}

// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

</HEAD>

<BODY>

<FORM METHOD=POST>

Value: <INPUT TYPE=text NAME="entry" VALUE=0
              onChange="calculate(this.form,'entry');">
Double: <INPUT TYPE=text NAME="twice" VALUE=0
               onChange="calculate(this.form,'twice');">
Square: <INPUT TYPE=text NAME="square" VALUE=0
               onChange="calculate(this.form,'square');">

</FORM>

</BODY>

</HTML>

Here you see that you have added a second argument passing an indicator of which field's event handler called the calculate() function. The function uses this in a complex if ... else construct to do only the necessary calculations and not rewrite the values just entered by the users.

The if ... else construct used in the calculate() function shows how it is possible to have more than one alternative:

if (condition1) {
  JavaScript commands
} else if (condition2) {
  JavaScript commands
} else if (condition3) {
  JavaScript commands
} else {
  JavaScript commands
}

This example can be extended to any number of conditions.

The script can be made easier to use and more general purpose by using the name property of the text field object. For instance, you can pass this.name to the function in all three event handlers (because the current object in each case is a text field):

<FORM METHOD=POST>

Value: <INPUT TYPE=text NAME="entry" VALUE=0
              onChange="calculate(this.form,this.name);">
Double: <INPUT TYPE=text NAME="twice" VALUE=0
               onChange="calculate(this.form,this.name);">
Square: <INPUT TYPE=text NAME="square" VALUE=0
               onChange="calculate(this.form,this.name);">

</FORM>