4.8. Event Handling

Bring up the subject of client-side events among a group of web developers, and the first (sometimes the only) one mentioned is the onclick event handler. Occasionally, someone will acknowledge the onmouseover and the onmouseout events, but that is usually a rare occurrence, such as leap year or a pay raise after Y2K. Come to think of it, you're more likely to hear a story about someone holding a door open for Walter Koenig than to hear the smallest utterance about another event.

The problem is that developers get into a rut, a comfort zone, and use the same events day in and day out. After a few months of this, we have a tendency to forget that the event handlers are even there. One of the reasons for this is that developing web applications is like riding a bike; when you don't remember how to do it right, there isn't even time to scream before the splat. For this reason, I have compiled Table 4-5, which covers the event handlers common to most browsers. Yes, Bill, that means that the beforeunload event is omitted.

Table 4-5. Event Handlers Common to Most Browsers

Operator	Syntax	Description
blur	object.onblur = function	Fires when an object loses focus, such as when Tab is pressed or another object is clicked.
focus	object.onfocus = function	Fires when the object gets focus, either programmatically or through user interaction.
load	window.onload = function	Fires when the page is loaded. This event can be simulated by periodically checking the document's readystate property.
resize	window.onresize = function	Fires when the window is resized.
scroll	window.onscroll = function	Fires when the page's scroll bars are used.
unload	window.onunload = function	Fires just before the page is onloaded. Although it is commonly used by pop-ups to spawn more pop-ups, it does have some legitimate uses.
onclick	object.onclick = function	Fires when an object is clicked.
dblclick	object.ondblclick = function	Fires when an object is double-clicked.
mousedown	object.onmousedown = function	Fires when the mouse button is pressed.
mouseup	object.onmouseup = function	Fires when the mouse button is released.
mousemove	object.onmousemove = function	Fires when the mouse is moved.
mouseover	object.onmouseover = function	Fires when the mouse pointer moves over the specified object.
mouseout	object.onmouseout = function	Fires when the mouse pointer moves off the specified object.
change	object.onchange = function	Fires when the object's value changes.
reset	object.onreset = function	Fires when the object (form) is reset.
select	object.onselect = function	Fires when a different option is selected on the object (select).
submit	object.onsubmit = function	Fires when the object (form) is submitted.
keydown	object.onkeydown = function	Fires when a keyboard key is pressed when the specified object has focus.
keyup	object.onkeyup = function	Fires when a keyboard key is released when the specified object has focus.
keypress	object.onkeypress = function	A combination of both the keydown and keyup events.

Unfortunately, knowing the events is only half the battle. For this knowledge to be of any use, it is necessary to know how to assign a JavaScript event to the handler. And as with many endeavors in JavaScript, there are two ways to accomplish this task. No, I'm not referring to a right way and a wrong way; I'm referring to assigning via HTML and via JavaScript. Listing 4-13 shows both ways to assign an event handler.

Listing 4-13. The Two Ways to Assign an Event Handler in JavaScript

document.getElementById('myButton').onclick = new Function('alert(\'Ouch! You clicked me!\')'); <input type="button" id="myButton" value="Don't click"> <input type="button" id="myButton" value="Click" onclick="alert('Oooh! Do it again!')">

Before wrapping up this chapter, there are some important items that could fall under the umbrella of event handling. Although they aren't really events, they do raise events. The items that I am referring to are the window.setTimeout() and window.setInterval() methods. Don't be surprised if you've never heard of them; they're a little "out there."

The purpose of these methods is to delay the execution of a JavaScript function for a specific number of milliseconds. Why? Well, let's say, for example, that you'd like to check later to see if an event has taken place and leave it at that. The real question is really, why are there two methods instead of one? The reason for two methods is that setTimeout executes a function once, whereas setInterval executes a function repeatedly until told otherwise. Think of setInterval as being afflicted with lycanthropy, and you get the concept. The syntax, shown here, for both of these methods is identical:

var oTime = window.setTimeout('myFunction()',1000);

var oInterval = window.setInterval('myYour()',100);

All that is left is what to do when it is necessary to clear a timeout or an interval. It is simple; just do the following, and they're cleared:

window.clearTimeout(oTime);

window.clearInterval(oInterval);

Remember one important thing when coding in JavaScript: Bending the rules is allowed. Experiment, and delve into matters that man, or woman, was not meant to delve into. After all, it is the mad scientist way.