12.2 Event Handlers as JavaScript Methods An event handler is an attribute of an HTML tag. Since HTML elements are also treated as objects in a JavaScript program, there are a number of event methods that can be used to simulate events (see Table 12.2). When an event method is applied to an object, the object to which it refers behaves as though the event has happened ; e.g., the click() method behaves like the onClick event, the blur() method behaves like the onBlur event, and so on. [2] The event method is applied to the object with the dot syntax, as are all other methods; e.g., in a JavaScript program you might see something like the following: [2] Event methods behave as though the event has happened but in themselves do not trigger an event handler. For example, the c lick() method does not trigger the o nClick event handler. document.test.button1.click(), window.focus() Table 12.2. Event methods. | Event Method | Event Handler It Simulates | Effect | | blur() | onBlur | Removes focus from windows , frames , form fields | | click() | onClick | Simulates a mouse click in form fields | | focus() | onFocus | Puts focus in a window, frame, form field | | reset() | onReset | Clears the form fields | | select() | onSelect | Selects or highlights text in a form field | | submit() | onSubmit | Submits a form | Example 12.3 <html> <head><title>Simulation Methods</title></head> <body bgcolor="yellow"> 1 <form name="myform" 2 action="http://localhost/cgi-bin/doit.pl" method="post"> Enter your name:<br> <input type="text" name="namefield" size="30" value="Name: " 3 onFocus="this.select()"> <p> Enter your address:<br> 4 <input type="text" name="addressfield" size="30" value="Address: " 5 onFocus="this.select()" > <p> </form> 6 <a href="#" onClick="javascript: document.myform.submit();"> Click here to submit your form</a> <p> 7 <a href="#" onClick="javascript:document.myform.reset();"> Click here to reset your form</a> </body> </html> EXPLANATION -
A form named myform is started. -
This is the URL where the form will be processed after it is submitted. -
The onFocus event handler is assigned an event method called select() . For this textbox, when the mouse cursor is clicked in the box, the onFocus event is triggered and the event is handled by highlighting or selecting the text in the box. -
Another text box is defined to hold the user 's address. -
When the cursor is moved into this field, the text box gets focus and the select() method is called to highlight this box, as in line 3. -
A deactivated link is assigned an onClick event handler. When the user clicks on the link, the JavaScript code is executed. The pseudo javascript: protocol is followed by a reference to the form and a submit() method, which causes the form to be submitted when the user clicks on the link. -
A deactivated link is assigned an onClick event handler. When the user clicks on the link, the JavaScript code is executed. The pseudo javascript: protocol is followed by a reference to the form and a reset() method, which clears the form fields. See Figure 12.3. Figure 12.3. The focus is in the first box and the field is selected (highlighted).  12.2.1 Return Values Sometimes the event handler's return value is necessary if a certain action is to proceed. The browser's default actions can be suppressed by returning a false value, or a form's submission can be completed by sending back a true value. For example, if the onSubmit handler gets a true value back from a function or method, then a form may be submitted to the server, and if not, the form will be stopped . In Chapter 11, "The Document Objects: Forms, Images, and Links," we saw that when validating a form, return values are used. The following example illustrates these return values. Example 12.4 <html><head><title>An HTML Form and the onSubmit Event Handler</title> <script language="JavaScript"> 1 function checkForm(yourinfo){ 2 if(yourinfo.namestring.value == "" yourinfo. namestring.value == null){ // Check for an empty string or null value 3 alert("Please type in your name"); 4 return(false); } else{ 5 return(true); } } </script> </head> <body> <b> 6 < form name="info" action="/cgi-bin/bookstuff/form1.cgi" method="post" 7 onSubmit="return checkForm(document.info)"><p> <font size="+1"><p> Type your name here: 8 <input type="text" name="namestring" size="50"> <p> 9 <input type="submit" value="Submit"> <input type="reset" value="Clear"> </form> </body> </html> EXPLANATION -
The function called checkForm() has one argument, yourinfo , which is a reference to the form defined on line 6. -
If the user didn't enter anything into the text box, the value of the input type will be null. The expression if(yourinfo.namestring.value == "") checks for an empty field. -
The user didn't enter anything into the text box. An alert dialog box will appear on the screen, and after he presses OK, he will have a chance to fill out the form again. -
If false is returned from this function, the form will not be submitted to the server. -
If true is returned from this function, the form will be submitted to the server. -
The HTML form starts here. The form, document.forms[0] , is named "info" . The action attribute contains the URL of the program that will process the form, a CGI script on the server. The method attribute defines the HTTP method that determines how the data will be sent to the server. -
The onSubmit event handler is an attribute of the HTML <form> tag and is triggered when the user presses the submit button. The event handler is a function called checkForm() . Its parameter is the name of the form, document.info (also could use its array name: document.forms[0] ). The return keyword is required when using the onSubmit event handler. One of two values will be returned: either true or false . -
The input type for this form is a text field box. Its name is "namestring" and it can hold a string of up to 50 characters . -
The input type is the submit button. When the user presses this button, the onSubmit event handler on line 7 is activated. See Figure 12.4. Figure 12.4. Using the onSubmit event and return values. If the return value is true the form is submitted; otherwise , it is stopped.  |
