Học JavaScript qua ví dụ part 53 potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (972.33 KB, 9 trang )
ptg
13.5 Handling Link Events 481
13.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
From the Library of WoweBook.Com
ptg
482 Chapter 13 • Handling Events
<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
EXAMPLE 13.12
<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.
From the Library of WoweBook.Com
ptg
13.6 Handling a Form Event 483
the 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
Object Event Handler
button onClick, onBlur, onFocus
checkbox onClick, onBlur, onFocus
FileUpLoad onClick, onBlur, onFocus
hidden none
password onBlur, onFocus, onSelect
radio onClick, onBlur, onFocus
reset onReset
select onFocus, onBlur, onChange
submit onSubmit
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">.
From the Library of WoweBook.Com
ptg
484 Chapter 13 • Handling Events
13.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.
EXAMPLE 13.13
<html>
<head><title>The this keyword</title>
<script type="text/javascript">
1 function display_formval(myform){
alert("text box value is: " + myform.namestring.value );
}
2 function display_buttonval(mybutton){
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" />
From the Library of WoweBook.Com
ptg
13.6 Handling a Form Event 485
<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>
EXPLANATION
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.
EXAMPLE 13.13 (CONTINUED)
From the Library of WoweBook.Com
ptg
486 Chapter 13 • Handling Events
13.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.
EXAMPLE 13.14
<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>
EXPLANATION
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.
From the Library of WoweBook.Com
ptg
13.6 Handling a Form Event 487
13.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, waiting 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.
EXAMPLE 13.15
<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
From the Library of WoweBook.Com
ptg
488 Chapter 13 • Handling Events
3 <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>
EXPLANATION
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.
EXAMPLE 13.15 (CONTINUED)
From the Library of WoweBook.Com
ptg
13.6 Handling a Form Event 489
13.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.
EXAMPLE 13.16
<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');
}
4 else{
confirm('Is '+ grade + ' correct?');
}
5 " />
6 </form>
</body>
</html>
From the Library of WoweBook.Com
