Monday, December 12, 2005
Event Handlers, Act IV
Blog Entry #24
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).)
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...';">
<img width="430" height="330" src="https://1.bp.blogspot.com/-YjQMsVB1bsI/Vy4wgMId2tI/AAAAAAAAAiI/OG1wxMsPcvwb7mkoWU9vVMPpY5lthsjqgCLcB/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:
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
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
The code for this is:
Shout out your favorite color: <input onkeyup="this.value=this.value.toUpperCase( );">
The code for this is:
<input type="button" value="Submit" onmouseup="this.value='Thanks for filling out the form.';">
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.)