In the example using mouse events, the event handler was assigned to a link and the link was deacti-vated by assigning a quoted hash mark to the link href attribute: Figure 13.13 Sprin
Trang 113.5 Handling Link Events
In many of the previous examples, links have been used to trigger events When the user
clicked or moved the mouse over a link, a link event was triggered One link event,
onClick, gets sent whenever someone clicks on a link As we saw with mouse events,
onMouseOver and onMouseOut also cause a link event to occur The link events are listed
in Table 13.5
13.5.1 JavaScript URLs
We have seen JavaScript code in a JavaScript: URL throughout this text In the example
using mouse events, the event handler was assigned to a link and the link was
deacti-vated by assigning a quoted hash mark to the link href attribute:
Figure 13.13 Spring image (top), summer image (middle), and fall image (bottom)
are all part of the slideshow created in Example 13.11.
Table 13.5 Link Events
Event Handler When It Is Triggered
onClick When the mouse is clicked on a link
onMouseOut When a mouse is moved out of a link
onMouseOver When a mouse is moved over a link
Trang 2<a href="#" onClick='alert("This hotlink is out of service!");
return false;’>Click here</a>
or by using the JavaScript: protocol followed by the void operator to guarantee that any
return value from the function will be discarded:
<a href="JavaScript:void(0);" onMouseOver="return changeSeason();"
In either case, the link was not supposed to take the user to another location, but instead
to handle an event or call a function (Make sure that any function calls in the URL have
been defined.) Another note: If the “#” causes the browser to jump to the top of the page
when the link is clicked, you can add a return false statement inside the onClick handler
to keep the browser from checking the content of the href.
The following simple example uses the onClick event handler with a deactivated link
and the return statement; the display is shown in Figure 13.14
13.6 Handling a Form Event
As discussed in Chapter 11, the document object has a form property It contains an array
of all the forms that have been defined in the document Each element of the array is a
form object and the number in the index of the array represents the order in which the
form appeared on the page The first form would be document.forms[0] Each form
con-tains elements, also represented as an array The elements represent the input types of
E X A M P L E 1 3 1 2
<html><head><title>Deactivate the hotlink</title></head>
<body>
<center>
<a href="#" onClick='alert("This hotlink is out of service!");
return false;'>Click here</a>
</center>
</body>
</html>
Figure 13.14 The user clicked a deactivated link.
Trang 3the form, such as a checkbox, radio button, or text field By naming each of the forms
and its respective elements, it is much easier to work with them in JavaScript (See
Chap-ter 11 for a complete discussion of the forms[] array.) There are a number of events
asso-ciated with the form’s elements Many of them were also covered in Chapter 11 They
are listed in Table 13.6
13.6.1 Buttons
One of the most common GUI form elements is the button The button object has no
default action and is normally used to trigger an event such as the onClick event HTML
4 allows you to create a <button> tag without the <input> tag.3 There are several buttons
associated with a form; the buttons are called:
• submit
• reset
• button
If an event handler, such as onSubmit or onChange is an attribute of a form tag, then
the event occurs when the user clicks one of the buttons associated with the form object
Form event handlers are listed in Table 13.7
Table 13.6 Event Handlers for the Form’s Elements
button onClick, onBlur, onFocus
checkbox onClick, onBlur, onFocus
FileUpLoad onClick, onBlur, onFocus
password onBlur, onFocus, onSelect
radio onClick, onBlur, onFocus
select onFocus, onBlur, onChange
text onClick, onBlur, onFocus, onChange
textarea onClick, onBlur, onFocus, onChange
3 The <button> </button> tags give greater flexibility to the appearance of the button by allowing HTML
con-tent to be displayed instead of plain text that is assigned to the value attribute of a button created using
the <input type="button">.
Trang 413.6.2 this for Forms and this for Buttons
The this keyword refers to the current object and is especially helpful when dealing with
forms In forms that contain multiple items, such as checkboxes, radio buttons, and
textboxes, it is easier to refer to the item with the this keyword than by using its full
name when calling a function or an event handler (Examples of the this keyword are
shown in Chapter 11.)
In a form, this could be the form itself or one of the input devices With an event
han-dler, the this keyword by itself references the current object, such as an input device,
whereas this.form references the form object where the input device was created.
Table 13.7 Form Event Handlers
Event Handler When It Is Triggered
onBlur When a form’s select, text, or textarea field loses focus
onChange When a select, text, or textarea field loses focus and its value has been
changed.
onClick When an object on a form is clicked.
onFocus When a field receives input focus by tabbing with the keyboard or clicking
with the mouse in the field.
onReset When the user resets the form.
onSelect When a user selects some of the text within a text or textarea field
onSubmit When a user submits a form.
E X A M P L E 1 3 1 3
<html>
<head><title>The this keyword</title>
<script type="text/javascript">
alert("text box value is: " + myform.namestring.value );
}
alert("button value is: " + mybutton.value);
}
</script>
</head>
<body><b>
<hr>
3 <form name="simple_form">
<p>
Type your name here:
<input type="text" name="namestring" size="50" />
Trang 5<p>
4 <input type="button"
value="Print Form Stuff"
5 onClick="display_formval(this.form);" />
<input type="button"
value="Print Button Stuff"
6 onClick="display_buttonval(this) ;" />
<input type="reset" value="Clear">
</form>
</body>
</html>
E X P L A N A T I O N
1 The function called display_formval() is defined Its only parameter is a reference
to a form; in this example the form started on line 3 The purpose of this function
is to display the text that the user typed in a text box, called “namestring” The
function is called when the onClick event handler is triggered on line 5.
2 The function called display_buttonval() is defined Its only parameter is a button
input type, defined on line 4 It displays the value in the button
3 This is the start of a form named simple.
4 The input type is a button in the form named simple.
5 The onClick event handler is triggered when the user clicks this button The
argu-ment sent to the display_formval() function, this.form, is a reference to the form
object Without the form property, the this keyword would refer to the current
ob-ject, the button See line 6 Rather than using the full JavaScript hierarchy to
ref-erence a form, the this keyword simplifies the process.
6 The onClick event is triggered when the user presses this button Because the
han-dler is assigned to the button, the this keyword is a reference to the button object
The display is shown in Figure 13.15
Figure 13.15 The user clicked the Print Form Stuff button.
E X A M P L E 1 3 1 3 (C O N T I N U E D)
Trang 613.6.3 Forms and the onClick Event Handler
The onClick event handler is used most often in forms The click event occurs when a
button in a form, such as a radio or checkbox, is pressed It also happens when an option
is selected in a Select menu In Chapter 11, we used many examples of the onClick event
handler Here are a few more
E X A M P L E 1 3 1 4
<html>
<head>
<title>Event Handling and Forms</title>
<script type="text/javascript">
1 function greetme(message){
alert(message);
}
</script>
</head>
<body bgcolor="white">
<h2>
Greetings Message
</h2>
<hr>
2 <form>
3 <input type="button" value="Morning"
4 onClick="greetme('Good morning This is your wakeup
call!')" />
<input type="button" value="Noon"
onClick="greetme('Let\'s do lunch.')" />
<input type="button" value="Night"
onClick="greetme('Have a pleasant evening.\nSweet
dreams ')" />
</form>
</body>
</html>
E X P L A N A T I O N
1 A simple function called greetme() is defined It will be called each time the user
clicks one of three buttons and will send an alert message to the screen
2 The HTML form starts here
3 The input type for this form is three buttons, respectively labeled “Morning”,
“Noon”, and “Night” See Figure 13.16.
4 When the user clicks a button, the onClick event is fired up, and the greetme()
function is called with a string See Figure 13.17 Watch the quotes in the string
Because the outside quotes are double quotes, the inner quotes are single And if
the outer set of quotes had been single quotes, the inner set would be double It’s
very easy to ruin a program just because the quoting is off, as you well know by
now if you’ve gone this far in the book
Trang 713.6.4 Forms and the onFocus and onBlur Event Handlers
The onFocus event handler is triggered when a form element has focus: The cursor is
sit-ting in the box, waisit-ting for key input or in the case of a button, for the Enter key to be
pressed The onBlur event is triggered when the form element loses focus, when the
cur-sor is moved away from the input device
Figure 13.16 Three buttons waiting for a user to click one of them.
Figure 13.17 The user clicked the Night button.
E X A M P L E 1 3 1 5
<html>
<head><title>Using the onFocus Event Handler</title>
<script type="text/javascript">
1 function handler(message){
2 window.status = message; // Watch the status bar
}
</script>
</head>
<body bgcolor="magenta"><b>The onFocus Event Handler
<i>(When you click in one of the boxes, focus goes
to the status bar)</i>
Continues
Trang 83 <form name="form1">
<p>Type your name:
4 <input type="text"
name="namestring"
size="50"
5 onFocus="handler('Don\'t forget to enter your name')">
<br />Talk about yourself here:<br />
6 <textarea name="comments"
align="left"
7 onFocus="handler('Did you add comments?')"
rows="5" cols="50">I was born
</textarea><p>
<input type="button"
value="submit">
<input type="reset"
value="clear">
</form>
</body>
</html>
E X P L A N A T I O N
1 A user-defined function called handler() is defined It takes a string as its only
parameter
2 The string message, “Don’t forget to enter your name” (or “Did you add comments?”)
is passed to the function and assigned to the window’s status bar (If you don’t see
anything in the status bar, the feature has been disabled for your browser For
Firefox go to the View option and click Status bar For Safari, View, and click Hide
Status Bar.)
3 The HTML form starts here
4 The first input type is a textbox
5 The textbox contains the attribute for the onFocus event handler When this box
has focus, the event will be fired up and call the handler() function.
6 A text area is defined to hold user comments
7 The text area contains the attribute for the onFocus event handler When this
box has focus, the event will be fired up and call the handler() function See
Figure 13.18
E X A M P L E 1 3 1 5 (C O N T I N U E D)
Trang 913.6.5 Forms and the onChange Event Handler
The onChange event handler is triggered after the user modifies the value or contents of
an HTML input, select, or text area element in a form, and then releases the mouse This
is another event handler that can be useful in checking or validating user input
Figure 13.18 Look at the status bar You might have to enable the View Status Bar
feature for your browser.
E X A M P L E 1 3 1 6
<html>
<head><title>onChange Event Handler</title></head>
<body>
1 <form>
Please enter your grade:
2 <input type="text" onChange="
grade=parseInt(this.value); //Convert to integer
3 if(grade < 0 || grade > 100){
alert('Please enter a grade between 0 and 100');
}
confirm('Is '+ grade + ' correct?');
}
5 " />
6 </form>
</body>
</html>