[Contents] [Previous] [Next] [Index]

onClick

Executes JavaScript code when a click event occurs; that is, when an object on a form is clicked. (A Click event is a combination of the MouseDown and MouseUp events).

Event handler for

Button, document, Checkbox, Link, Radio, Reset, Submit

Implemented in

Navigator 2.0
Navigator 3.0: added the ability to return false to cancel the action associated with a click event

Syntax

onClick="handlerText"

Parameters

handlerText
JavaScript code or a call to a JavaScript function.

Event properties used

type
Indicates the type of event.

target
Indicates the object to which the event was originally sent.

When a link is clicked,
layerX, layerY,
pageX, pageY,
screenX, screenY

Represent the cursor location at the time the event occurred.

which
Represents 1 for a left-mouse click and 3 for a right-mouse click.

modifiers
Contains the list of modifier keys held down when the event occurred.

Description

For checkboxes, links, radio buttons, reset buttons, and submit buttons, onClick can return false to cancel the action normally associated with a click event.

For example, the following code creates a link that, when clicked, displays a confirm dialog box. If the user clicks the link and then chooses cancel, the page specified by the link is not loaded.

<A HREF = "http://home.netscape.com/"
   onClick="return confirm('Load Netscape home page?')">
Netscape</A>
If the event handler returns false, the default action of the object is canceled as follows:

Examples

Example 1: Call a function when a user clicks a button. Suppose you have created a JavaScript function called compute. You can execute the compute function when the user clicks a button by calling the function in the onClick event handler, as follows:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
In the preceding example, the keyword this refers to the current object; in this case, the Calculate button. The construct this.form refers to the form containing the button.

For another example, suppose you have created a JavaScript function called pickRandomURL that lets you select a URL at random. You can use onClick to specify a value for the HREF attribute of the A tag dynamically, as shown in the following example:

<A HREF=""
   onClick="this.href=pickRandomURL()"
   onMouseOver="window.status='Pick a random URL'; return true">
Go!</A>
In the above example, onMouseOver specifies a custom message for the browser's status bar when the user places the mouse pointer over the Go! anchor. As this example shows, you must return true to set the window.status property in the onMouseOver event handler.

Example 2: Cancel the checking of a checkbox. The following example creates a checkbox with onClick. The event handler displays a confirm that warns the user that checking the checkbox purges all files. If the user chooses Cancel, onClick returns false and the checkbox is not checked.

<INPUT TYPE="checkbox" NAME="check1" VALUE="check1"
   onClick="return confirm('This purges all your files. Are you sure?')"> Remove files

See also

For general information on event handlers, see "General Information about Events".

For information about the event object, see event.


[Contents] [Previous] [Next] [Index]

Last Updated: 10/31/97 16:34:02


Copyright © 1997 Netscape Communications Corporation