JavaScript Editor Free JavaScript Editor     JavaScript Debugger 

Main Page

Previous Page
Next Page

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





object.onblur = function

Fires when an object loses focus, such as when Tab is pressed or another object is clicked.


object.onfocus = function

Fires when the object gets focus, either programmatically or through user interaction.


window.onload = function

Fires when the page is loaded. This event can be simulated by periodically checking the document's readystate property.


window.onresize = function

Fires when the window is resized.


window.onscroll = function

Fires when the page's scroll bars are used.


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.


object.onclick = function

Fires when an object is clicked.


object.ondblclick = function

Fires when an object is double-clicked.


object.onmousedown = function

Fires when the mouse button is pressed.


object.onmouseup = function

Fires when the mouse button is released.


object.onmousemove = function

Fires when the mouse is moved.


object.onmouseover = function

Fires when the mouse pointer moves over the specified object.


object.onmouseout = function

Fires when the mouse pointer moves off the specified object.


object.onchange = function

Fires when the object's value changes.


object.onreset = function

Fires when the object (form) is reset.


object.onselect = function

Fires when a different option is selected on the object (select).


object.onsubmit = function

Fires when the object (form) is submitted.


object.onkeydown = function

Fires when a keyboard key is pressed when the specified object has focus.


object.onkeyup = function

Fires when a keyboard key is released when the specified object has focus.


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:



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.

Previous Page
Next Page

JavaScript Editor Free JavaScript Editor     JavaScript Debugger