Monday, December 12, 2005
Event Handlers, Act IV
Blog Entry #24
The HTML Goodies JavaScript Primers series turns its gaze one more time to event handlers in Primer #10, in which it discusses the onMouseOut and onUnload event handlers. To review briefly: HTML Goodies introduced a first event handler, onMouseOver, in Primer #4, and then covered in Primer #5 several additional event handlers (onClick, onFocus, etc.). Joe Burns treats onMouseOut and onUnload together in Primer #10 "because they act after the fact"; what he means by this is that the mouseout and unload events are not 'standalone,' but require a previous event to have occurred, specifically, a mouseout event necessarily follows a mouseover event, and an unload event necessarily follows a load event. Other "after the fact" event handlers include the onBlur, onKeyUp, and onMouseUp event handlers, which we will briefly consider at the end of this entry.
(In light of our discussion of the DOM in Blog Entry #22, let me point out, in the name of completeness, that "[t]he set of all events which may occur, and the particular page elements on which they can occur, is part of the Document Object Model (DOM), and not JavaScript itself," to quote WDVL.)
onMouseOut
As its name implies, the onMouseOut event handler executes JavaScript code in response to moving the mouse cursor out/away from a 'mouseovered' document body element. This versatile event handler can be applied to:
(1) Text
I am a chameleon.
<span onmouseover="this.style.color='red';" onmouseout="this.style.color='green';">I am a chameleon.</span>
(Contra Primer #10, event handlers are not case-sensitive, as we noted in Blog Entry #7.)
(2) Form controls
(Depending on your browser, you may need to click the text box below to start the effect(s).)
<form>
Tell us your first name, please: <input size="40" onmouseover="this.value='Just click and enter your name...';" onmouseout="this.value='Don\'t be shy...';">
</form>
(3) Images
<img width="430" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHflGMn1TKgceFn7MGbVLMsnyURVfBF-y60S6v07zaqkUwK19VpQDjM2wCzlg7qd9G15H2Q3iGSnDnxzF2rq4WOlO-IPkSRVLtyxMKxrvN4fTLNa60GNADSJb4Palp-QW6KbCsA/s1600/tricat.jpg" onmouseout="window.alert('Feed us!');">
(4) Tables and elements thereof
Click here for the code.
I leave it to you, as the list above is not meant to be complete, to apply onMouseOut to other document elements. (FWIW, my attempts to use either onMouseOver or onMouseOut with an "in-line frame" were unsuccessful.)
The Primer #10 Script
Joe for his part uses the onMouseOut event handler in the Primer #10 Script, appearing below, with a hyperlink (as he did onMouseOver in the Primer #4 Script):
<BODY onUnload="alert('Leaving so soon?')">
<A HREF="Unloadpage.html" onMouseOver="window.status='Hey! Get off of me!';
return true" onMouseOut="window.status='Much better - Thanks'; return true">
Place your mouse on and off of this</A>
In the "Deconstructing the Script" section of Primer #10, Joe asks, "Remember a few primers back when we separated two Event Handlers with a comma so they would occur simultaneously?" He is referring here to the code below, culled from the "But I Want Both Effects" subsection of Primer #4:
<A HREF="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Go to the Goodies Home Page';
return true">Click Here</A>
Because the document.bgColor and window.status commands above are triggered by the same mouseover event, however, a single onMouseOver event handler attribute can be used to execute both commands, as noted in Blog Entry #7. Joe emphasizes that mouseover and mouseout are distinct events that thus require separate event handlers, which should be obvious from my demos above.
We also discussed the use of the "return true" statement with the onMouseOver event handler in some detail in Blog Entry #7. To recap: I found on my computer that "return true" (a) must follow onMouseOver in an anchor tag when using Netscape but (b) is unnecessary under other circumstances (e.g., when onMouseOver is used with other tags, or when using MSIE). I similarly find that it is unnecessary to follow the onMouseOut event handler with "return true", whether in an anchor or nonanchor tag and whether using Netscape or MSIE, which makes sense, because there is no 'default HTML behavior' to preempt in moving the mouse cursor away from a link or other element.
We discussed and demonstrated the onUnload event handler in Blog Entry #10, using it there with the alert( ) method, as Joe does above.
The Primer #10 Assignment
Like the Primer #10 Script, the Primer #10 Assignment asks the reader to use the onMouseOut and onMouseOver event handlers with a link to execute window.status commands, which, in the assignment answer, incorporate navigator.appName and document.location commands that are returned and then concatenated with text strings to make up the status bar messages:
<a href="assign_10.html" onMouseOver="window.status='Hey ' + navigator.appName + ' user - click here!'; return true" onMouseOut="window.status='You should leave ' + document.location + ' right away.'; return true">Run your mouse over this link</a>
(Recall the Primer #3 Script, in which Date( ) object methods are similarly returned in the instance of a document.write( ) command.)
Joe rightfully calls attention to the quote formatting of the anchor tag above; note that navigator.appName and document.location appear outside the single quotes of the window.status values but inside the double quotes of the onMouseOver or onMouseOut value. Actually, the "Other code possibilities..." section of my previous blog entry features onLoad commands in <body> tags that incorporate variables in an analogous way, but I negligently did not comment on the quote formatting of those commands.
In the assignment answer, an onUnload event handler is used to trigger the goodbyedate( ) function comprising five now-familiar commands. When using onUnload to call a function, an alternate syntax is possible; instead of putting onUnload="goodbyedate( )" in the <body> tag, we could modify the script in the document head as follows:
// after the first four goodbyedate( ) commands:
alert("Leaving so soon? It's only " + t + ".");
}
window.onunload = goodbyedate;
// end hiding --> etc.
In the code above, note that goodbyedate is not followed by a set of parentheses; the browser treats:
window.onunload = goodbyedate( );
as a normal function call, and the goodbyedate( ) function fires when the page loads (and does not fire when the page unloads), or at least that's what happens on my computer. Also note that goodbyedate; is not put in quotes; were you to do so, the goodbyedate( ) function will not fire at all when the page either loads or unloads.
(And yes, there is an analogous window.onload = function_name; syntax for calling a function when a page loads.)
Let me lastly note that Joe's answer, as 'shaped' on the answer page, contains an error that prevents the script in the answer from running, namely:
<!-- Hide from browsers that do
not understand Javascript
should not be split between two lines, but all on one line (Joe makes this point in Primer #9), as it is in the page's source.
Other 'After-the-Fact' Event Handlers
(1) The onBlur event handler executes JavaScript code in response to a blur event, which necessarily follows a focus event. We discussed and demonstrated the onBlur event handler here in Blog Entry #9.
(2) The onKeyUp event handler executes JavaScript code in response to a keyup event, which "occurs when the user releases a [keyboard] key from its depressed position," to quote DevGuru, and which necessarily follows a keydown or keypress event (these events have their own event handlers, onKeyDown and onKeyPress). In illustration, type in lowercase letters your favorite color in the text box below:
The code for this is:
<form>
Shout out your favorite color: <input onkeyup="this.value=this.value.toUpperCase( );">
</form>
The demo above, which was inspired by the example on DevGuru's onKeyUp page, makes use of the toUpperCase( ) method of the JavaScript String object; we noted in Blog Entry #22 that the values of field-type form controls function as String objects.
(3) The onMouseUp event handler executes JavaScript code in response to a mouseup event, which occurs "whenever the user releases the mouse button," again quoting DevGuru, and which necessarily follows a mousedown event (there is a corresponding onMouseDown event handler). There is little, if any, practical difference between the onMouseUp and onClick event handlers - to the best of my knowledge, onMouseUp and onClick can be used with the same document body objects, including the document itself - but let's illustrate onMouseUp anyway, why not? Click on the Submit button below to see an onMouseUp command in action:
The code for this is:
<form>
<input type="button" value="Submit" onmouseup="this.value='Thanks for filling out the form.';">
</form>
(4) Looking over DevGuru's list of event handlers, I was curious as to whether the onDblClick event handler, which executes JavaScript code in response to double-clicking the mouse button, might also be an "after the fact" event handler, as it seemed to me that a dblclick event would necessarily follow a click event. However, unlike the pairs of events discussed previously in this post, I find that I cannot separate the dblclick event from the click event. Consider the code below:
Click <a href="http://www.google.com" onclick="window.alert('Let\'s get searching, shall we?');" ondblclick="window.alert('Ouch! One click is enough, thank you very much!');">here</a> to go to the Google home page.
Click here to go to the Google home page.
Double-clicking the word "here" executes the onClick command, but not the onDblClick command.
(FYI: contra DevGuru, onDblClick is supported by Netscape as well as by MSIE; contra Netscape, onDblClick is indeed implemented on the Macintosh.)
I may or may not craft another entry before the end of the year, as I'm thinking of acting on my long-held plans to upgrade my computer in the next week or two, which will result in some 'downtime' vis-à-vis my blogging efforts...in any case, we will in the next post look at HTML Goodies' JavaScript Primers #11, which discusses a classic JavaScript-driven process: opening new browser windows on command.
reptile7
- posted by A. Peak @ 2:12 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)