In This Chapter
The Main Event
Who They Are
The Click event occurs when a user clicks the mouse button on either a link or a form element. Form elements include buttons, check boxes, and "reset" or "submit" buttons (see the following figure).
The Focus event occurs when a user clicks or uses the Tab key to bring attention to a given form element. That is, when a user clicks a form element to activate it and prepare it to accept an entry, a Focus event occurs. For certain form elements, such as a button, clicking on it triggers both a Click and Focus event. Form elements such as text boxes, though, don’t possess Click events, although they do trigger a Focus event when clicked on. Note that the Focus event occurs before the user enters data into the element; focus merely occurs when the element is activated for use. (Because some people use the Tab key to move between form elements, that also triggers a Focus event as each element becomes active.)
The Blur event is the opposite of the Focus event: it occurs when a user removes the focus from a currently in-focus form element, either by clicking or tabbing to another form element (thus moving the focus to a new element) or by clicking on some inactive region of the page (thus removing focus from all elements).
The Change event occurs after a user modifies the input into a form element such as a text input area. It also occurs if a selection is made from a selection box (the form element that allows a user to make a selection from a scrolling list of choices). Note that the Change event occurs only after a modified entry loses focus. That is, the moment a user begins entering data into a form element, the Change event is not triggered. It is triggered when the user finishes entering data (i.e., when he removes focus from the element by clicking elsewhere).
The MouseOver event occurs when the mouse pointer is over a link. While using the Web, you may have noticed that when you move the pointer over a link within a page, the URL address of that link appears in the status bar. That is an example of a MouseOver event.
Somewhat the reverse of the MouseOver event is the MouseOut event, which occurs when the mouse leaves the region over a hyperlink or an area within a client-side image map. If areas or hyperlinks are adjacent to one another on a Web page, a MouseOut event might also lead to a MouseOver event as the user moves the pointer away from one link and over another. You can use this combination, for instance, to highlight an option as the user passes his mouse pointer over it.
A Select event occurs when a user selects text within a form's text entry element (highlights the area of text by dragging the mouse across it while holding down the left button). A user might do this just before modifying the text in the entry. The following figure shows selected text in a form entry element.
Submit and Reset
One Eye Open: Watching for Events
For each particular page element (link, form, and so on), you specify events to watch for in the form of an attribute of the tag that defines that element. Event attributes take this form:
First, consider a simple example; after all, specifics make more sense than general definitions.
Recall the link tag in HTML. In typical HTML, you would define a link in the following way:
The user browsing your Web page sees "Text to appear highlighted in page" as a colored link. If he clicks that link, he is taken to the new page defined by the URL specified in the HREF attribute.
it matters whether you refer to a
result in errors. However, HTML code is not case-sensitive. Tags and their attributes (which includes
onEvent attributes) can be in either upper- or lowercase. For the purposes of writing this book, though,
Between the Lines: Calling an Event Handler
The function call is the most common and desirable event handler. This is why functions are so useful. In a nicely constructed Web page, you define each function intended to handle a particular event at the top of the page in the <HEAD> section. Then, in the course of the page, you call each function as required by your event watchers (the onEvent attributes).
In the case of a function call event handler, the previous link example might resemble this:
Important Parameter Bulletin
Note that the onEvent attribute requires double quotation marks around
its definition. This means
that if you want to send a string literal as a parameter in the function call, you cannot use double
quotation marks to specify the literal. For example, suppose you want to call printfancy ("Nice work!")
as the event handler. To do so, you have to use single quotation marks for the string literal so it won’t
be misinterpreted as the close of the onEvent attribute. Thus, you have to write
onEvent="printfancy ('Nice work!')".
Using code like that above, you can change the event handler assigned to an event, even if that event handler was previously defined in HTML tags. You’ll see a simple example of this later in the chapter.
Examples, Exemplars, and Instantiations
However, what might strike you as different, upon first glance, is the fact that you pass the parameter this.checked to the function marstat(). What is this.checked? It's composed of two parts—this and checked. Let's consider each, as this concept will reappear in subsequent examples.
onClick and Canceling an Event
<INPUT NAME=submit TYPE=”submit” VALUE="Submit Data" onClick="return confirm('Submit Data?')">
Alrighty then. As this is the final onEvent example, it's the most complicated. Let's tear this beast apart and see what's going on up there.
For now, completely ignore the onSubmit attribute; we'll look at it last. Everything else should look like a typical HTML form. After the <FORM> tag, you define a text entry blank that is one row high and 20 spaces wide. You name this element email, using the NAME= attribute. (This name does not appear on the screen; it is for program reference only.) The text following the <INPUT> tag will appear on the screen beside the element. Again, this is standard HTML form syntax.
Below that line, you create another element, a Submit button, and below that, you create a Reset button (in case the user wants to clear the text-entry element). Now look at the event handling in this form, which is defined in the opening <FORM> tag. Because you want to call your function when the user submits the form via the Submit button, you use an onSubmit event watcher. Then, as in the previous examples, you define the event handler as a function call to the function evalform(). This should be familiar territory by now. What's worth special note, however, is the syntax of the parameter you are sending to the evalform() function. The evalform() function (if it existed) would accept the user's input into the text-entry element of the form and determine whether it were a plausible e-mail address. You refer to this data with the name this.email.value. Why?
In the above code, you first defined three functions: event1(), event2(), and check(). Both event1() and event2() are event handlers for an onClick event of the ClickMe button. The function check() is our focal point: it determines the status of the check box and sets the appropriate event handler (either event1 or event2) to the onClick event for the ClickMe button.
Notice that you define an onClick event in the HTML tag for the check box, thus calling the check() function and properly assigning the event handler for the ClickMe button.
Lastly, notice the final line of code in the above example:
This explicitly calls the check() function one time so that the ClickMe event handler is properly set before the user first clicks the check box.
The Least You Need to Know
Once again, reading the full chapter is an excellent idea. The following list is a fair summary, but it’s far from detailed instruction.
For comments or technical support for our books and software, select Talk to Us. © 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.