Thông tin tài liệu
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 . 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,. 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);". 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
Ngày đăng: 04/07/2014, 02:20
Xem thêm: Học JavaScript qua ví dụ part 53 potx, Học JavaScript qua ví dụ part 53 potx
