TODAY'S LESSON: JavaScript Event Handling _______________________

HTML can do some neat stuff, but it does it on its own time. If you
tell it to create you a table, it will make the table when the page
loads, period. Our old friend JavaScript, on the other hand, in
addition to having a snazzy arsenal of tricks, has one particular
feature that lends it a lot of interactivity and power: event
handling. You can make things happen when you want them to -- in
response to user input or browser functions -- whenever you want.
That's why we love event handling.

Some events are already familiar -- mouse clicks, for example.
Everybody already uses the mouseover event to create those fabulously
nifty buttons that change color when a pointer hovers over them.

The basic event handling syntax is very simple. The following code
will pop up a window when you click a button:

<form>
<input type="button" value="Click me please" onClick="alert('Mmm,
that feels good.');">
</form>

As you can probably deduce, the active ingredient here is "onClick"
-- a simple handler that refers to the event when a button or link
is clicked. When that event happens, the JavaScript commands following
the onClick are executed. If you need an elaborate action to take place
when the button is clicked, you can call a predefined function at that
point. All of the event handlers work pretty much the same way, and vary
only in what target elements are available: a button is susceptible
to being clicked, whereas a form is not. Here is a rundown of the common
event handlers, ones that both Netscape and IE can deal with. (There
are a bunch more that only work in one browser or the other, but those
are a pain.)

In alphabetical order:

onAbort is triggered when an image is stopped from loading because
the user either hits Stop or leaves the page.

onBlur is triggered when an element, such as a window, frame, or form
field, loses focus; that is, when the user clicks on something else.

onClick you already know.

onChange is triggered when the value of a form field changes, for
example, when the user types in some data.

onDblClick is triggered by a double-click.

onError is triggered by a loading error, like a missing image.

onFocus is the opposite of onBlur: it's triggered when the user puts
the focus on the target element, by clicking on it or tabbing to it.

onKeyDown is triggered when a key on the keyboard is pushed down,
regardless of whether it is then held down or released.

onKeyPress is repeatedly triggered as long as a key is held down.

onKeyUp is triggered when a key is released.

onLoad is triggered when the browser completely loads the page.

onMouseDown is like onKeyDown but for the mouse button.

onMouseMove is triggered when -- yes -- when the mouse moves.

onMouseOut is triggered when the pointer moves out of the target
area (off of an image, for example).

onMouseOver is the opposite of onMouseOut: it's triggered when the
pointer moves over the target element.

onMouseUp is like onKeyUp but for mice.

onReset is triggered when the Reset button of a form is clicked.

onResize is triggered when a window or frame is resized by the user.

onSelect is triggered when the user highlights text in a form field.

onSubmit is triggered when a form is submitted.

onUnload is triggered when the user leaves the page.

Generally these work nicely and predictably. Let's look at a couple
of code examples just to make sure everything's clear.

Here's the classic mouseover button effect that shows one image when
it's left alone, and another when the mouse passes over it:

<a href="http://www.schmoop.com/"
onMouseOver="document.img.src='images/rolloverimg.gif';"
onMouseOut="document.img.src='images/regularimg.gif';">
<img src="images/regularimg.gif" name="img"></a>

Basically you have two images, one called "regularimg.gif" and the
other called "rolloverimg.gif." The image link contains onMouseOver
and onMouseOut instructions that change the image object from
"regularimg.gif" to "rolloverimg.gif" and back again.

Here is a nice one that is popular on search engines. It automatically
puts the cursor focus on a particular form field when the page is loaded:

<head>
<script language="JavaScript">

</script>
</head>
<body onLoad="foc()">
<form name="searchform">
<input type="text" name="inputfield" onBlur="foc()">
</form>
</body>

Here, the onLoad event triggers the foc() function, so that as soon
as the page is loaded, focus is given to the input field. But there's
anther trick: we've put an onBlur event handler in the input field, so
that the focus can never leave! Or rather, as soon as it leaves the
field it is brought back by the same foc() function. Tricky.

Event handling is simple to use, and it offers a lot of flexibility
and interactivity. Experiment. See what you can do with it.

HINTS, POINTERS, AND TIPS O' THE TRADE __________________________

Probably the most annoying event handler JavaScript offers is
onUnload. Just as the user thinks he or she is getting away from
your page for good, the event handler detects that the page is being
unloaded and executes one final command. One typical use is a pop-up
window, just to say goodbye. If the pop-up window also contains an
onUnload command ... well, it's your karma.

Always test event handling code on both Netscape and IE. They have
a number of crucial differences. IE, in fact, offers a bunch of handlers
that Netscape doesn't support, so if you know all your users will be
running IE, you might want to try out things like onReadyStateChange.

Even if you don't think noise is what's waking you up before you're
ready, wearing earplugs may help you sleep later on weekends.

RESOURCES _______________________________________________________

Webmonkey's mouseover guide:
http://hotwired.lycos.com/webmonkey/98/23/index3a_page2.html?tw=659

Webmonkey's Thau on link events:
http://hotwired.lycos.com/webmonkey/98/03/index2a_page9.html?tw=659

Webmonkey on how to steal event handling code:
http://hotwired.lycos.com/webmonkey/99/30/index1a_page4.html?tw=659