Vol. 1, No. 35
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">
<!--
function foc() {
document.searchform.inputfield.focus()
}
// -->
</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

Webmonkey's Thau on link events

Webmonkey on how to steal event handling code

Handcrafted Archive