Event Handler Basics

Can't we all just get along? Let's begin by looking at what the two browsers have in common regarding events before tearing them apart into foes. Consider the popular Click event. Suppose that we want to capture the Click event at a form field button. When the user clicks this particular button we launch a set of JavaScript code.

We capture events and trigger code using an event handler. An event handler is typically written as an attribute within the HTML tag for the element you are interested in watching. For instance, the following HTML tag defined an event handler for the Click event for a form field button named "clickme".

<input 
 type="button" 
 name="clickme" 
 value="Click Here to See Results" 
 onClick="showResults();">

Event handler attributes prepend the letters "on" to the event name; thus an event handler for a Click event is written as onClick. Reading the above tag should be relatively straightfoward if you are familiar with HTML -- a form field button is created whose script name is "clickme" and which displays the message assigned to value on its face. When a Click event happens at this button a JavaScript function named showResults() is launched. Voilà.

Of course, showResults() could be virtually any function which you have written with the intent of handling this event. You needn't only call functions in the event handler -- any set of valid JavaScript statements is legitimate. Imagine, instead, that you simply want to alter the status message in the browser window and don't need to call a special function:

<input 
 type="button" 
 name="clickme" 
 value="Click Here to See Results" 
 onClick="window.status='Thanks';return true;">

Notice that we use single quotation marks within the event handler because the entire event handler code is contained within a set of double quotation marks.

Also notice the "return true" statement which finishes off this event handler. Sometimes you need to return a value of true or false to control what happens after the event handler has executed. In the case of specifying a new message for the status bar, returning a value of true keeps that message on the status bar after the event handler has completed. In some cases the value you return from the event handler determines how other attributes of the HTML tag are handled. A good example is the <A> tag, which you typically use to create a hyperlink.

<a 
 href="somepage.html" 
 onClick="someFunction();return false;">

When the user clicks the hyperlink the event handler will be triggered and someFunction() is executed. At this point the hyperlink has not actually been followed through yet. After the function completes the statement return false executes. Because the event handler has returned a value of false the browser aborts handling of this tag -- meaning, the href attribute is not followed. Had the event handler returned true then the link would have been followed. In this particular example the event handler always returns false, since we have explicitly coded it that way, which seems silly -- why have an href at all? A more realistic possibility would be that the function itself ultimately determines whether the link should be followed or not. That function, then, would return a true or false value.

function someFunction()
{ if (something) 
   {proceed=true} 
  else {proceed=false} 
 return proceed
}

The event handler will receive the value of proceed, but the event handler itself must pass this value onto the browser. The event handler for the above, then, would look like:

<a 
 href="somepage.html" 
 onClick="return someFunction();">

There you have it -- a conditional event handler -- if someFunction() returns true then the href hyperlink will follow through, otherwise it will not.

Remember that, depending on the DOM, not all elements support all event handlers. For example, in the Netscape DOM, an image element does not have any event handlers. Therefore, a tag such as:

<img 
 src="pic.gif" 
 onMouseOver="func();">

will simply do nothing when the mouse passes over the image in Navigator, since the event handler is unsupported. This is entirely DOM-dependent; Internet Explorer would support the above tag happily because its DOM allows a MouseOver event on an image. An element which supports a particular event is known as a "target element", because it can be the target of that event. Shortly we will look more specifically at how the two browsers differ in their support of defining event handlers and supported target elements.

The Document Object Model
Events in JavaScript: An Inside Look
The Event Object