Learn Advanced JavaScript Programming

Table of Contents

Try loading this page and clicking the button. If you are using Navigator 3.0x or 4.0, an alert box displays the message “This is the second function,” despite the fact that the event handler associates the click event with the first function, alert1(). Notice the script placed directly after the form. It associates a different function with the click event of button1 in form1.

Note: Event handlers are function references as opposed to function calls. Therefore, you must assign alert2, not alert2(), which is primarily a function call, evaluating to the type and value the function returns. Also, since the event handler HTML attributes are literal function bodies, you cannot use <INPUT … onClick=alert2> in the HTML source. You must call the function instead. See Chapter 28, Evaluation and Compilation.

Figure 11-7. An error message generated by a script that assigns a statement to an event handler.

You are probably wondering why we used onclick rather than onClick. The reason is that JavaScript is case sensitive and understands onclick (all lowercase), whereas HTML is case insensitive. In HTML, you may use all lowercase, all uppercase, or any other convention you choose.

Calling event handlers explicitly enables flexible event handlers, because you can modify them anywhere in the script. You can create a customized page, allowing the user to determine what a certain button should do when clicked.

An event handler does not have to exist when you use this technique. The preceding script would work exactly the same if you omitted the event handler specification in the HTML source and used the following line instead:

<INPUT TYPE="button" NAME="button1" VALUE="button1">

In this case you are actually defining a new event handler to correspond with an event.

Also note that the above method is the only way to assign a function reference to an event handler. You cannot use any of the following structures:

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

document.form1.button1.onclick = "alert2()"

// -->

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

document.form1.button1.onclick = alert2()

// -->

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

document.form1.button1.onclick = "var counter = 5"

// -->

Such attempts to assign statements that are not function references result in an error upon clicking the button:

Cancelling Events

Netscape Navigator 3.0x and 4.0 make it possible to cancel a click event, either with a hypertext link or a client-side image map. The onClick event handler can return false to cancel the action normally associated with a click event. Here is an example:

<HTML>
<HEAD>
<TITLE>Cancelling events in onClick</TITLE>
<BODY>

<A HREF="http://www.netscape.com/" onClick="return confirm('Load
Netscape home page?')">Netscape</a>

</BODY>
</HTML>

When you click the hypertext link, a confirm box pops up. If you click OK, the method evaluates to true, the event qualifies, and the new page (Netscape’s home page) loads. If the user selects Cancel, the method returns false, and the new page, associated with the click event, does not load.

Summary

In this chapter you discovered events and event handlers. JavaScript is known to add interaction to Web pages, meaning you can respond to actions that the user performs. Events describe such actions, whereas event handlers take care of them. They give JavaScript programmers the ability to interact with the user. Only rarely do you find scripts on the Web that do not take advantage of this unique feature. Although interaction does not include only event handlers (we’ve seen dialog boxes before), they are probably the most important means of interaction in JavaScript. They extend the capability of Web pages, as you might have noticed while surfing the net. We did not present any events or event handlers in detail in this chapter, excluding onLoad and onUnload, for they will be discussed individually in depth later in the book. Each event and its corresponding handler has significant features. As you will see later, all events are associated with specific objects, so it is important that you be introduced to these objects before we discuss their event handlers.

Table of Contents