Make your own free website on Tripod.com

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">
<!--
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:
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