Learn Advanced JavaScript Programming

Table of Contents

This window is exactly the same as the one presented in Figure 11-1, except that the HTML page is excluded. No events occur outside of the HTML page. For example, opening Navigator’s mail or news window does not generate an event. Scrolling up and down the window does not cause an event either. Even if you change the appearance of an HTML page, you are not triggering an event. It is very important to realize the difference between events and other actions because JavaScript can only handle events, not other actions. Many questions in mailing lists and news groups such as “When do the people at Netscape plan to create an event handler triggered by scrolling...?” show the ignorance of programmers in recognizing what an event is. An event handler can obviously handle only events! Events occur no matter what the size of the HTML page zone is, as long as a page is loaded. Note that future releases of Navigator or Internet Explorer may expand the term of events to the entire window, but that is still in doubt. Netscape Navigator 3.0x made a step towards this when it introduced the ability to automatically scroll via JavaScript, though a corresponding event was not implemented.

Event Handlers

Event handlers correspond to their associated events. They are scripts that execute automatically when events occur. Most deferred JavaScript functions are called by event handlers. You saw earlier that events are actions that do not have any direct influence. They only serve the event handlers. Each event handler is associated with an event.

Event handlers are embedded in documents as attributes of HTML tags to which you assign JavaScript code. The general syntax is:

<TAG eventHandler="JavaScript Code">

You can use event handlers to embed any JavaScript code. You can place a 500-line script including functions as an event handler tag. You can use more than one event handler with the same HTML tag.

The names of the event handlers are constructed of the word “on” + the name of the event. Here is the full list of supported event handlers:

onAbort
onBlur
onClick
onChange
onError
onFocus
onLoad
onMouseOut
onMouseOver
onSelect
onSubmit
onUnload

Here is an HTML page that displays the message “Hello” when you load it, and “Goodbye” when you unload it (see Figures 11-4a and 11-4b):

Figure 11-4a and b. The output of two event handler scripts attached to the same tag (see Example 11-1).

<HTML>
<HEAD>
<TITLE>Hello / Goodbye</TITLE>
</HEAD>
<BODY onLoad="alert('Hello')" onUnLoad="alert('Goodbye')">
</BODY>
</HTML>

Example 11-1 (ex11-1.htm). An HTML document with two event handlers as separate attributes of the same tag.

Event handlers are not case sensitive. For example, you can use ONLOAD instead of onLoad. Although event handlers are related to JavaScript, the event handler itself is normally used as an HTML attribute—HTML is not case sensitive. It is still a good practice to use identifier-like naming conventions for event handlers. As you will see later, the official name of an event handler is all lowercase, but in HTML it doesn’t matter.

Example 11-2 is a classic script that takes advantage of event handlers.

<HTML>
<HEAD>
<TITLE>A link description in the status bar</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.wordware.com/"
 onMouseOver="window.status = 'Wordware Publishing'; return true"
 >Wordware</A>
</BODY>
</HTML>

Example 11-2 (ex11-2.htm). An event handler script that displays a short description of a link when the user has the pointer over that link.

Figure 11-5. A custom message in the status bar.

It is sometimes problematic to execute statements directly in an event handler script. For example, if you want to include a long script, placing it in the event handler script makes the HTML page cumbersome, and maintenance becomes difficult. Another case in which difficulties can arise is when you want to correlate a script containing strings— quotation marks—to an event handler. As you can see, the event handler requires quotation marks to delimit the specified JavaScript code from the surrounding HTML content. JavaScript requires alternation of quotation types, single and double, so you will probably find it annoying to write scripts with an emphasis on quotes. Event handlers accept any JavaScript script, as long as it is valid. For that reason, you should associate functions with event handlers. The only statement you need in the event handler script is the function call.

You should normally place all functions at the top of the page, or more accurately, in the <HEAD>…</HEAD> portion of the document. This action forces JavaScript to evaluate your functions before it continues laying out the page. With this practice you guarantee that when the browser comes across an event handler in the HTML portion of the page, it will succeed to call the function associated with that event if it occurs. The only restriction is that you do not place any event handlers to pick up events before the JavaScript script in the <HEAD>…</HEAD> portion. Such a restriction applies also to external files implemented via the SRC attribute of the <SCRIPT> tag. The basic structure of such a page is:

<HTML>
<HEAD>
<TITLE>The title of the page</TITLE>
<SCRIPT LANGUAGE="JavaScript" [SRC="path.js"]>
<!--

function functionName(parameters) {
 statement1
 statement2
 statement3
 .
 .
 .
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<TAG otherAttributes eventHandler="functionName(arguments)">
</BODY>
</HTML>

Table of Contents