Thursday, May 26, 2005
Event Handlers, Act III
Blog Entry #10
We finish off our discussion of HTML Goodies JavaScript Primers #5 with some commentary on the following event handlers:
onSelect
onSubmit
onLoad
onUnload
onSelect
The onSelect event handler executes a JavaScript command statement in response to a select event, which refers not to the select form element but to the
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:
<form>
<input type="text" value="select me" onselect="style.fontVariant='small-caps';">
</form>
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.
Relatedly, JavaScript has a select( ) method that can be used to select (i.e., highlight) the fields of text, textarea, and password elements and, like the focus( ) method, thus prompt the user for input to these elements. We can illustrate these methods when we discuss the object hierarchy statements of forms in Primer #8.
onSubmit
A submit event occurs when a form is submitted by clicking a submit button form element. When using this event to execute JavaScript code via the onSubmit event handler, the onSubmit attribute should be put in the parent <form> tag, NOT in the <input type="submit"> tag, as incorrectly shown in the primer. We can demonstrate onSubmit with the form below; answer the question, and then click the submit button (if a dialog box pops up when you submit, click "Cancel"):
We will learn how to open new windows with JavaScript in Primer #11.
In this section of the primer, Joe demonstrates the onSubmit event handler with a new command:
onSubmit="parent.location='/legacy/primers/jsp/thanksalot.html';"
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?
"Parent" is serving here as a synonym of sorts for the window object (in Primer #8, it is defined as a "built-in name" for a window), and it is indeed classified as a property of the window object, but as noted by JavaScript Kit, outside of a frame context parent "simply refers to [the] current window". In other words, the command above can (and should, IMO) be formulated as window.location='/legacy/primers/jsp/thanksalot.html'.
As for "location", there is in JavaScript a location object, and as noted at DevGuru's location object page, the command above does in fact create a new instance of the location object, but in the command itself, location functions syntactically as a property of the window object; what the command does is assign a new value, in this case the URL of a different Web page, to this property, causing the browser window to move from the current page to the different page - it's "setting up a link", as Joe puts it. The command thus follows the object.property format that we have seen previously, and does not have a 'reversed' format, as the primer implies.
One more point - related to onSubmit is the JavaScript submit( ) method, which "[p]erforms the same action as clicking a submit button". Seems redundant, doesn't it? But there it is in the language for someone who might figure out a use for it.
onLoad
The onLoad event handler pertains most often to the window object. When you navigate to a new Web page with your browser, a load event occurs as you consequently load that page and its associated files temporarily into your computer's memory. It might then seem that onLoad would be associated with the document object - after all, it's the document that "loads" - but this is not the case. Anyway, the loading of Web pages can be tied to the execution of JavaScript code by placing an appropriate onLoad attribute command in the document <body> tag, as noted in the primer.
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.)
The onLoad event handler can also be used with an image element so as to execute JavaScript code when the image has fully loaded. We'll be working with images later on in the primer series, so perhaps we can revisit onLoad in an image context then.
onUnload
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).
In Blog Entry #11, we'll check over HTML Goodies JavaScript Primers #6, which revisits the concept of variables and also introduces the prompt( ) method of the window object - see you then.
reptile7
- posted by A. Peak @ 2:00 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)