Learn Advanced JavaScript Programming

Table of Contents

It is very easy to find the associated functions if you always place their definitions in the <HEAD>…</HEAD> portion of the page. The HTML portion of the page stays as simple as it was before JavaScript was even invented. The only new piece of HTML is the half-line attribute—the event handler. Another important advantage of using functions with event handlers is that you can use the same function many times in the same HTML page. For example, if you have a form with four text fields, you can validate each one of them using the same function, by calling this function upon occurrence of an event which is specific to one of the fields.

You may have noticed that the title is specified before the script tag. Although the title is specified via an HTML tag, it has no event handlers that could possibly invoke a function defined later. You will probably not have any problems if you do not follow this rule, although it is still a good practice, because it contributes to the neat organization of the page and guarantees that you will never have any layout problems.

onLoad and onUnload

Two very important event handlers are onLoad and onUnload. Their corresponding events, load and unload, are triggered by those actions. When the page has finished loading, the load event takes place. When the user exits a page in any way, the unload event occurs. These are the most simple event handlers because they are related to the most basic <BODY> tag, and are specified as attributes of this tag. The following document welcomes the user via an alert box when entering the page, and says goodbye when the user exits, also via an alert box:

<HTML>
<HEAD>
<TITLE>onLoad and onUnload event handlers</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to our page!')"
onUnload="alert('Goodbye, and don\'t forget to come back!')">
</BODY>
</HTML>

The onLoad event handler is widely used to call deferred scripts—functions. Placing a function call as the event handler’s script enables you to control the timing of the execution, so the script executes only when the page is fully laid out.

onError

The onError event handler expands JavaScript’s ability to interact with the user according to errors that occur. This event handler is not supported by Navigator 2.0x or IE 3.0x. It belongs to windows, but also to images. In this section we will only discuss it as associated with windows, because images are discussed later in the book.

An error event occurs when the loading of a window or image causes an error. The onError event handler executes a JavaScript script when such an error occurs.

The onError event handler is extremely useful due to the fact that it can be set to one of three values:

null — suppresses all error dialogs. Setting window.onerror to null means your users won’t see JavaScript errors caused by your own code.
A function that handles errors — replaces the standard dialog boxes used by JavaScript to report errors.
Variable that contains null or a valid function reference.

The following JavaScript statement disables JavaScript error dialogs:

window.onerror = null

You should place this statement in its own script directly after the <HEAD> tag to be on the safe side, using the following HTML document structure:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

window.onerror = null

// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

The same rule applies to all values you assign to this event handler explicitly.

The following document does not display any error dialog, although an error is encountered. (If you can’t fish it out, you may want to review the previous chapters, or just look at the alert() method’s argument for a clue.)

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

window.onerror = null

// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(Quotes missing)
// -->
</SCRIPT>
</BODY>
</HTML>

It is a good practice to set the onError event handler to null when your script runs on a public page. However, it makes no sense when writing the script, because it makes debugging impossible.

Here is another document that disables errors and therefore avoids a stack overflow error from being reported:

<HTML>
<HEAD>
<TITLE>Disabling error messages</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// disable error reports
window.onerror = null

// create an error-generating function (infinite recursion)
function testErrorFunction() {
 testErrorFunction()
}

// -->
</SCRIPT>
</HEAD>
<BODY onload="testErrorFunction()">
</BODY>
</HTML>

An error occurs with or without assigning null to the event handler. The difference is that no response to the error on the browser’s behalf is generated. See “Calling Event Handlers Explicitly” later in this chapter for a discussion on assigning values to event handlers via JavaScript.

Another option is to write a function to handle errors in place of the standard JavaScript error-reporting dialog boxes. The function should accept three arguments:

The error message
The URL of the script that caused the error
The error line number

The function intercepts JavaScript errors. It must return the value true.

Here is a classic set of functions and statements for error handling:

Table of Contents