Thursday, May 26, 2005
Event Handlers, Act III
Blog Entry #10
highlighting of text characters in a text, textarea, or password form element with the mouse cursor. Consider, for example, the text box below; highlight with your mouse the "select me" text, and see what happens to it:
The coding for this is:
<input type="text" value="select me" onselect="style.fontVariant='small-caps';">
It's not necessary to select the entire box value to trigger the execution of the onSelect command; in fact, selecting just a single character will do it.
As far as I am aware, the onSelect event handler cannot be used with 'normal' text on a Web page; sure enough, my attempts to execute onSelect attribute commands in <p>, <span>, and <div> tags were unsuccessful.
In this section of the primer, Joe demonstrates the onSubmit event handler with a new command:
Joe's classification of "parent" as a property and of "location" as an object, while correct to an extent, is confusing and incomplete. Let's fill in the gaps, shall we?
HTML Goodies waits until Primer #9 to illustrate the onLoad event handler, but that doesn't mean we can't sneak in a demo here, does it now? Click here to see an onLoad command in action; close the resulting window to see an onUnload command in action.
(I was originally going to put onLoad and onUnload attribute commands in the <body> tag of my Blogger template in order to demonstrate these event handlers directly here on my blog, but I found that I am unable to execute independently onSubmit and onUnload commands on my computer, so I created a separate page for onLoad and onUnload. I refer you to the source of the demo page for the coding.)
onUnload is an event handler only for the window object. An unload event occurs upon 'closing' a Web page in one way or another, e.g., going to a new page in the same window, closing the page with the Close command under the File menu, or quitting the browser. It follows that an onUnload command executes when leaving a Web page, and the onUnload attribute - like window-related onFocus, onBlur, and onLoad attributes - is placed in the <body> tag. HTML Goodies waits until Primer #10 to illustrate the onUnload event handler, using it there with a window.alert( ) command, as does the demo above.
I'll wrap up this entry with a few remarks about...
The end-of-primer assignment and its answer
Joe asks the reader to create an 'interactive' form whose individual elements each make use of an event handler.
Let's first note that a form with a text box, two checkboxes, and a submit button has four elements, and not three (each checkbox counts as a separate element).
Secondly, if we want the chocolate vs. vanilla preference to be an either/or choice, then we should use radio buttons, and not checkboxes, for this part of the form.
Thirdly, note that for the submit button, Joe uses an onClick event handler, and not onSubmit, in the <input type="submit"> tag to pop up an alert box when submitting the form (we could use an onSubmit command but it would go in the <form> tag, as noted above).