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:
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.
Event |
Description |
|
blur |
Occurs when input focus is removed from a form element (when the user clicks outside a field) |
|
click |
Occurs when the user clicks on a link or form element |
|
change |
Occurs when the value of a form field is changed by the user |
|
focus |
Occurs when input focus is given to a form element |
|
load |
Occurs when a page is loaded into Navigator |
|
mouseover |
Occurs when the user moves the pointer over a hypertext link |
|
select |
Occurs when the user selects a form element's field |
|
submit |
Occurs when a form is submitted (i.e. when the user clicks on a submit button) |
|
|
|
New Term
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)">
The onChange event handler is one of many event handlers available in JavaScript. onChange and other event handlers are discussed in more depth later in this
chapter.
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 semi-colons, 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"), 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.
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.
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").
Object |
Event Handlers Available |
|
Selection List |
onBlur, onChange, onFocus |
|
Text Element |
onBlur, onChange, onFocus, onSelect |
|
Textarea Element |
onBlur, onChange, onFocus, onSelect |
|
Button Element |
onClick |
|
Checkbox |
onClick |
|
Radio Button |
onClick |
|
Hypertext Link |
onClick, onMouseOver |
|
Reset Button |
onClick |
|
Submit Button |
onClick |
|
Document |
onLoad, onUnload |
|
Window |
onLoad, onUnload |
|
|
|
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 had on its Web site an on-line order form for ordering designer clothes and it wanted to ensure that the users provided 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.
The select(), focus(), and blur(), methods display inconsistent behavior on different platforms. For instance, on Windows 95, blur() removes focus from a field but will leave the cursor displayed in the field
even though users won't be able to enter information into the text field.
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:
Don't try to run this code! It is for illustration purposes only.
<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.
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 has loaded completely, including associated graphics, 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 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
<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.
Input
<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>
Output
This script produces results similar to Figure 5.1.
Figure 5.1. The onLoad event handler generates this dialog box.
End of Output
Analysis
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.
This script could be expanded and personalized as you did in using the prompt() method in the "Welcome to Netscape Navigator 2!" 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>
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").
Input
<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;
// MAKE page AN INTEGER (GET RID OF THE STUFF AFTER THE DECIMAL POINT
// 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>
Analysis
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.
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.
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.
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.
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 the Chapter 6 in detail). You can then refer to properties and methods for the current object as this.methodName() or this.propertyName.
In this example, you will use event handlers and text input fields to produce a simple calculator. You will use a form which 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.
Input
<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>
Output
This script produces results similar to Figure 5.2.
Figure 5.2. When a user enters an expression, the result is calculated and displayed.
End of Output
Analysis
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.
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 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 forms object in more detail and work more with the events and event handlers in relationship to forms.
Command/Extension |
Type |
Description |
|
blur() |
JavaScript method |
Removes focus from a specified object |
|
click() |
JavaScript method |
Emulates a mouse click on an object |
|
focus() |
JavaScript method |
Emulates the user focusing on a particular form field |
|
submit() |
JavaScript method |
Emulates a click on the submit button of a form |
|
select() |
JavaScript method |
Selects the input area of a particular form field |
|
onLoad |
Event Handler |
Specifies JavaScript code to execute when a page finishes loading |
|
onUnload |
Event Handler |
Specifies JavaScript code to execute when the user opens a new URL |
|
Math.random() |
JavaScript method |
Generates a random number between 0 and 1 |
|
Math.sqrt() |
JavaScript method |
Calculates the square root of a number |
|
window.open() |
JavaScript method |
Opens a URL in a named window or frame |
|
Math.round() |
JavaScript method |
Rounds a floating point value to the closest integer |
|
onFocus |
Event Handler |
Specifies JavaScript code to execute when the user gives focus to a form field |
|
onBlur |
Event Handler |
Specifies JavaScript code to execute when the user removes focus from a form field |
|
|
|
|
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 and No. According to the specifications of JavaScript, the
Math object will include a random() method. However, in the
release of Navigator 2.0 currently available, the method is
only implemented on the UNIX platforms.
To make this script easier, you will probably want to use the Math.sqrt() method, which returns the square root of the argument passed to it.
