Table of Contents | Previous
| Next
| Index
This chapter contains the event handlers that are used with client-side objects in JavaScript to evoke particular actions.
For general information on event handlers, see the Client-Side JavaScript Guide.
The following table summarizes the event handlers. The name of an event handler is the name of the event, preceded by "on." For example, the event handler for the focus event is onFocus.
Table 3.1 Event handlers
Executes JavaScript code when an abort event occurs; that is, when the user aborts the loading of an image (for example by clicking a link or clicking the Stop button).
onAbort="handlerText"
In the following example, an onAbort handler in an Image object displays a message when the user aborts the image load:
<IMG NAME="aircraft" SRC="f15e.gif"
onAbort="alert('You didn\'t get to see the image!')">
event, onError, onLoad
Executes JavaScript code when a blur event occurs; that is, when a form element loses focus or when a window or frame loses focus.
Event handler for |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window
|
Implemented in |
JavaScript 1.0
JavaScript 1.1: event handler of Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, and window
|
onBlur="handlerText"
The blur event can result from a call to the window.blur method or from the user clicking the mouse on another object or window or tabbing with the keyboard.
For windows, frames, and framesets, onBlur specifies JavaScript code to execute when a window loses focus.
A frame's onBlur event handler overrides an onBlur event handler in the BODY tag of the document loaded into frame.
NOTE:
In JavaScript 1.1, on some platforms placing an onBlur event handler in a
FRAMESET tag has no effect.
Example 1: Validate form input. In the following example, userName is a required text field. When a user attempts to leave the field, the onBlur event handler calls the required function to confirm that userName has a legal value.
<INPUT TYPE="text" VALUE="" NAME="userName"
onBlur="required(this.value)">
Example 2: Change the background color of a window. In the following example, a window's onBlur and onFocus event handlers change the window's background color depending on whether the window has focus.
<BODY BGCOLOR="lightgrey"
onBlur="document.bgColor='lightgrey'"
onFocus="document.bgColor='antiquewhite'">
Example 3: Change the background color of a frame. The following example creates four frames. The source for each frame, onblur2.html has the BODY tag with the onBlur and onFocus event handlers shown in Example 1. When the document loads, all frames are light grey. When the user clicks a frame, the onFocus event handler changes the frame's background color to antique white. The frame that loses focus is changed to light grey. Note that the onBlur and onFocus event handlers are within the BODY tag, not the FRAME tag.
<FRAMESET ROWS="50%,50%" COLS="40%,60%">
<FRAME SRC=onblur2.html NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">
<FRAME SRC=onblur2.html NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">
</FRAMESET>
The following code has the same effect as the previous code, but is implemented differently. The onFocus and onBlur event handlers are associated with the frame, not the document. The onBlur and onFocus event handlers for the frame are specified by setting the onblur and onfocus properties.
<SCRIPT>
function setUpHandlers() {
for (var i = 0; i < frames.length; i++) {
frames[i].onfocus=new Function("document.bgColor='antiquewhite'")
frames[i].onblur=new Function("document.bgColor='lightgrey'")
}
}
</SCRIPT>
<FRAMESET ROWS="50%,50%" COLS="40%,60%" onLoad=setUpHandlers()>
<FRAME SRC=onblur2.html NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">
<FRAME SRC=onblur2.html NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">
</FRAMESET>
Example 4: Close a window. In the following example, a window's onBlur event handler closes the window when the window loses focus.
<BODY onBlur="window.close()">
This is some text
</BODY>
event, onChange, onFocus
Executes JavaScript code when a change event occurs; that is, when a Select, Text, or Textarea field loses focus and its value has been modified.
onChange="handlerText"
Use onChange to validate data after it is modified by a user.
In the following example, userName is a text field. When a user changes the text and leaves the field, the onChange event handler calls the checkValue function to confirm that userName has a legal value.
<INPUT TYPE="text" VALUE="" NAME="userName"
onChange="checkValue(this.value)">
event, onBlur, onFocus
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).
onClick="handlerText"
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:
NOTE:
In JavaScript 1.1, on some platforms, returning false in an onClick event
handler for a reset button has no effect.
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
event
Executes JavaScript code when a DblClick event occurs; that is, when the user double-clicks a form element or a link.
onDblClick="handlerText"
NOTE:
DblClick is not implemented on the Macintosh.
The following example opens an alert dialog box when a user double-clicks a button:
<form>
<INPUT Type="button" Value="Double Click Me!"
onDblClick="alert('You just double clicked me!')">
</form>
event
Executes JavaScript code when a DragDrop event occurs; that is, when the user drops an object onto the browser window, such as dropping a file.
onDragDrop="handlerText"
Getting the data property of the DragDrop event requires the UniversalBrowserRead privilege. For information on security, see the Client-Side JavaScript Guide.
The DragDrop event is fired whenever a system item (file, shortcut, and so on) is dropped onto the browser window using the native system's drag and drop mechanism. The normal response for the browser is to attempt to load the item into the browser window. If the event handler for the DragDrop event returns true, the browser loads the item normally. If the event handler returns false, the drag and drop is canceled.
event
Executes JavaScript code when an error event occurs; that is, when the loading of a document or image causes an error.
onError="handlerText"
An error event occurs only when a JavaScript syntax or runtime error occurs, not when a browser error occurs. For example, if you try set window.location.href='notThere.html' and notThere.html does not exist, the resulting error message is a browser error message; therefore, onError would not intercept that message. However, an error event is triggered by a bad URL within an IMG tag or by corrupted image data.
window.onerror applies only to errors that occur in the window containing window.onerror, not in other windows.
onError can be any of the following:
If you write an error-handling function, you have three options for reporting errors:
Example 1: Null event handler. In the following IMG tag, the code onError="null" suppresses error messages if errors occur when the image loads.
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2"
onError="null">
Example 2: Null event handler for a window. The onError event handler for windows cannot be expressed in HTML. Therefore, you must spell it all lowercase and set it in a SCRIPT tag. The following code assigns null to the onError handler for the entire window, not just the Image object. This suppresses all JavaScript error messages, including those for the Image object.
<SCRIPT>
window.onerror=null
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">
However, if the Image object has a custom onError event handler, the handler would execute if the image had an error. This is because window.onerror=null suppresses JavaScript error messages, not onError event handlers.
<SCRIPT>
window.onerror=null
function myErrorFunc() {
alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2"
onError="myErrorFunc()">
In the following example, window.onerror=null suppresses all error reporting. Without onerror=null, the code would cause a stack overflow error because of infinite recursion.
<SCRIPT>
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>
Example 3: Error handling function. The following example defines a function, myOnError, that intercepts JavaScript errors. The function uses three arrays to store the message, URL, and line number for each error. When the user clicks the Display Error Report button, the displayErrors function opens a window and creates an error report in that window. Note that the function returns true to suppress the standard JavaScript error dialog.
<SCRIPT>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
msgArray[msgArray.length] = msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length] = lno
return true
}function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B><P>') for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> ' + urlArray[i] + '<BR>')
win2.document.writeln('<B>Line number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> ' + msgArray[i] + '<P>')
}
win2.document.close()
}
</SCRIPT><BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error"
onClick="alert('unterminated string)">
<P><INPUT TYPE="button" VALUE="Display Error Report"
onClick="displayErrors()">
</FORM>
This example produces the following output:
Error Report
Error in file: file:///c%7C/temp/onerror.html
Line number: 34
Message: unterminated string literal
Error in file: file:///c%7C/temp/onerror.html
Line number: 34
Message: missing ) after argument list
Error in file: file:///c%7C/temp/onerror.html
Line number: 30
Message: noSuchFunction is not defined
Example 4: Event handler calls a function. In the following IMG tag, onError calls the function badImage if errors occur when the image loads.
<SCRIPT>
function badImage(theImage) {
alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2"
onError="badImage(this)">
</FORM>
event, onAbort, onLoad
Executes JavaScript code when a focus event occurs; that is, when a window, frame, or frameset receives focus or when a form element receives input focus.
Event handler for |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window
|
Implemented in |
JavaScript 1.0
JavaScript 1.1: event handler of Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, and window
JavaScript 1.2: event handler of Layer
|
onFocus="handlerText"
The focus event can result from a focus method or from the user clicking the mouse on an object or window or tabbing with the keyboard. Selecting within a field results in a select event, not a focus event. onFocus executes JavaScript code when a focus event occurs.
A frame's onFocus event handler overrides an onFocus event handler in the BODY tag of the document loaded into frame.
Note that placing an alert in an onFocus event handler results in recurrent alerts: when you press OK to dismiss the alert, the underlying window gains focus again and produces another focus event.
NOTE:
In JavaScript 1.1, on some platforms, placing an onFocus event handler in a
FRAMESET tag has no effect.
The following example uses an onFocus handler in the valueField Textarea object to call the valueCheck function.
<INPUT TYPE="textarea" VALUE="" NAME="valueField"
onFocus="valueCheck()">
See also the examples for onBlur.
event, onBlur, onChange
Executes JavaScript code when a KeyDown event occurs; that is, when the user depresses a key.
onKeyDown="handlerText"
|
Property
|
Description
|
|---|
type |
Indicates the type of event.
|
target |
Indicates the object to which the event was originally sent.
|
layerX, layerY,
pageX, pageY,
screenX, screenY |
For an event over a window, these represent the cursor location at the time the event occurred. For an event over a form, they represent the position of the form element.
|
which |
Represents the ASCII value of the key pressed. To get the actual letter, number, or symbol of the pressed key, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt method.
|
modifiers |
Contains the list of modifier keys held down when the event occurred.
|
A KeyDown event always occurs before a KeyPress event. If onKeyDown returns false, no KeyPress events occur. This prevents KeyPress events occurring due to the user holding down a key.
The following example uses the blockA function to evaluate characters entered from the keyboard in the textentry text box. If a user enters either "a" or "A", the function returns false and the text box does not display the value.
<form name="main">
<input name="textentry" type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script>
In the function, the which property of the event assigns the ASCII value of the key the user presses to the keyChar variable. The if statement evaluates keyChar and returns false for the specified characters.
event, onKeyPress, onKeyUp
Executes JavaScript code when a KeyPress event occurs; that is, when the user presses or holds down a key.
onKeyPress="handlerText"
|
Property
|
Description
|
|---|
type |
Indicates the type of event.
|
target |
Indicates the object to which the event was originally sent.
|
layerX, layerY,
pageX, pageY,
screenX, screenY |
For an event over a window, these represent the cursor location at the time the event occurred. For an event over a form, they represent the position of the form element.
|
which |
Represents the ASCII value of the key pressed. To get the actual letter, number, or symbol of the pressed key, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt method.
|
modifiers |
Contains the list of modifier keys held down when the event occurred.
|
A KeyPress event occurs immediately after a KeyDown event only if onKeyDown returns something other than false. A KeyPress event repeatedly occurs until the user releases the key. You can cancel individual KeyPress events.
In this example, the captureEvents method catches keyboard input and the onKeyPress handler calls the blockA function to examine the keystrokes. If the keystrokes are "a" or "z", the function scrolls the Navigator window.
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;
event, onKeyDown, onKeyUp
Executes JavaScript code when a KeyUp event occurs; that is, when the user releases a key.
onKeyUp="handlerText"
|
Property
|
Description
|
|---|
type |
Indicates the type of event.
|
target |
Indicates the object to which the event was originally sent.
|
layerX, layerY,
pageX, pageY,
screenX, screenY |
For an event over a window, these represent the cursor location at the time the event occurred. For an event over a form, they represent the position of the form element.
|
which |
Represents the ASCII value of the key pressed. To get the actual letter, number, or symbol of the pressed key, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt method.
|
modifiers |
Contains the list of modifier keys held down when the event occurred.
|
In this example, the captureEvents method catches keyboard input and the onKeyUp handler calls the Key_Up function. An alert method within the function opens a dialog box to display the value of the keystroke.
function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);
event
Executes JavaScript code when a load event occurs; that is, when the browser finishes loading a window or all frames within a FRAMESET tag.
onLoad="handlerText"
Use the onLoad event handler within either the BODY or the FRAMESET tag, for example, <BODY onLoad="...">.
In a FRAMESET and FRAME relationship, an onLoad event within a frame (placed in the BODY tag) occurs before an onLoad event within the FRAMESET (placed in the FRAMESET tag).
For images, the onLoad event handler indicates the script to execute when an image is displayed. Do not confuse displaying an image with loading an image. You can load several images, then display them one by one in the same Image object by setting the object's src property. If you change the image displayed in this way, onLoad executes every time an image is displayed, not just when the image is loaded into memory.
If you specify an onLoad event handler for an Image object that displays a looping GIF animation (multi-image GIF), each loop of the animation triggers the onLoad event, and the event handler executes once for each loop.
You can use the onLoad event handler to create a JavaScript animation by repeatedly setting the src property of an Image object. See Image for information.
Example 1: Display message when page loads. In the following example, the onLoad event handler displays a greeting message after a Web page is loaded.
<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>
Example 2: Display alert when image loads. The following example creates two Image objects, one with the Image constructor and one with the IMG tag. Each Image object has an onLoad event handler that calls the displayAlert function, which displays an alert. For the image created with the IMG tag, the alert displays the image name. For the image created with the Image constructor, the alert displays a message without the image name. This is because the onLoad handler for an object created with the Image constructor must be the name of a function, and it cannot specify parameters for the displayAlert function.
<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"
function displayAlert(theImage) {
if (theImage==null) {
alert('An image loaded')
}
else alert(theImage.name + ' has been loaded.')
}
</SCRIPT><IMG NAME="imageB" SRC="greenball.gif" ALIGN="top"
onLoad=displayAlert(this)><BR>
Example 3: Looping GIF animation. The following example displays an image, birdie.gif, that is a looping GIF animation. The onLoad event handler for the image increments the variable cycles, which keeps track of the number of times the animation has looped. To see the value of cycles, the user clicks the button labeled Count Loops.
<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0
onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops"
onClick="alert('The animation has looped ' + cycles + ' times.')">
Example 4: Change GIF animation displayed. The following example uses an onLoad event handler to rotate the display of six GIF animations. Each animation is displayed in sequence in one Image object. When the document loads, !anim0.html is displayed. When that animation completes, the onLoad event handler causes the next file, !anim1.html, to load in place of the first file. After the last animation, !anim5.html, completes, the first file is again displayed. Notice that the changeAnimation function does not call itself after changing the src property of the Image object. This is because when the src property changes, the image's onLoad event handler is triggered and the changeAnimation function is called.
<SCRIPT>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
} else {
whichImage=-1
return
}
}
</SCRIPT><IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top"
onLoad="changeAnimation(this)">
See also the examples for Image.
event, onAbort, onError, onUnload
Executes JavaScript code when a MouseDown event occurs; that is, when the user depresses a mouse button.
onMouseDown="handlerText"
If onMouseDown returns false, the default action (entering drag mode, entering selection mode, or arming a link) is canceled.
Arming is caused by a MouseDown over a link. When a link is armed it changes color to represent its new state.
This example lets users move an image on an HTML page by dragging it with the mouse. Your HTML code defines the image and positions it in a layer called container1. In your JavaScript code, event handlers set the position properties of container1 as users drag the image, creating the animation.
Using style sheets, the image is initially defined and positioned as follows:
<HEAD>
<STYLE type="text/css">
#container1 { position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>
In the previous HTML code, the ID attribute for the P element which contains the image is set to container1, making container1 a unique identifier for the paragraph and the image. The STYLE tag creates a layer for container1 and positions it.
The following JavaScript code defines onMouseDown, onMouseUp, and onMouseMove event handlers:
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Do any right mouse button processing here*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Do any right mouse button processing here*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*This function called only if MOUSEMOVEs are captured*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT>
In the previous code, the captureEvents method captures MouseUp and MouseDown events. The DRAG_begindrag and DRAG_enddrag functions are respectively called to handle these events.
When a user presses the left mouse button, the DRAG_begindrag function starts capturing MouseMove events and tells the DRAG_drag function to handle them. It then assigns the value of the MouseDown event's pageX property to DRAG_lastX, the value of the pageY property to DRAG_lastY, and true to DRAG_dragging.
The DRAG_drag function evaluates DRAG_dragging to make sure the MouseMove event was captured by DRAG_begindrag, then it uses the moveBy method to position the object, and reassigns values to DRAG_lastX and DRAG_lastY.
When the user releases the left mouse button, the DRAG_enddrag function stops capturing MouseMove events. DRAG_enddrag then makes sure no other functions are called by setting onmousemove to Null and DRAG_dragging to false.
event
Executes JavaScript code when a MouseMove event occurs; that is, when the user moves the cursor.
onMouseMove="handlerText"
Because mouse movement happens so frequently, by default, onMouseMove is not an event of any object. You must explicitly set it to be associated with a particular object.
The MouseMove event is sent only when a capture of the event is requested by an object. For information on events, see the Client-Side JavaScript Guide.
See the examples for onMouseDown.
event, document.captureEvents
Executes JavaScript code when a MouseOut event occurs; that is, each time the mouse pointer leaves an area (client-side image map) or link from inside that area or link.
onMouseOut="handlerText"
If the mouse moves from one area into another in a client-side image map, you'll get onMouseOut for the first area, then onMouseOver for the second.
Area tags that use onMouseOut must include the HREF attribute within the AREA tag.
You must return true within the event handler if you want to set the status or defaultStatus properties with onMouseOver.
See the examples for Link.
event, onMouseOver
Executes JavaScript code when a MouseOver event occurs; that is, once each time the mouse pointer moves over an object or area from outside that object or area.
onMouseOver="handlerText"
If the mouse moves from one area into another in a client-side image map, you'll get onMouseOut for the first area, then onMouseOver for the second.
Area tags that use onMouseOver must include the HREF attribute within the AREA tag.
You must return true within the event handler if you want to set the status or defaultStatus properties with onMouseOver.
By default, the HREF value of an anchor displays in the status bar at the bottom of the browser when a user places the mouse pointer over the anchor. In the following example, onMouseOver provides the custom message "Click this if you dare."
<A HREF="http://home.netscape.com/"
onMouseOver="window.status='Click this if you dare!'; return true">
Click me</A>
See onClick for an example of using onMouseOver when the A tag's HREF attribute is set dynamically.
See also the examples for Link.
event, onMouseOut
Executes JavaScript code when a MouseUp event occurs; that is, when the user releases a mouse button.
onMouseUp="handlerText"
If onMouseUp returns false, the default action is canceled. For example, if onMouseUp returns false over an armed link, the link is not triggered. Also, if MouseUp occurs over an unarmed link (possibly due to onMouseDown returning false), the link is not triggered.
NOTE:
Arming is caused by a MouseDown over a link. When a link is armed it changes
color to represent its new state.
See the examples for onMouseDown.
event
Executes JavaScript code when a move event occurs; that is, when the user or script moves a window or frame.
onMove="handlerText"
In this example, the open_now function creates the myWin window and captures Move events. The onMove handler calls another function which displays a message when a user moves myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWindow","width=400,height=400,menubar=no,
location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please move this window</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.MOVE);
myWin.onmove=fun2;
}
function fun2(){
alert("Hey you moved me!");
this.focus(); //'this' points to the current object
}
event
Executes JavaScript code when a reset event occurs; that is, when a user resets a form (clicks a Reset button).
onReset="handlerText"
The following example displays a Text object with the default value "CA" and a reset button. If the user types a state abbreviation in the Text object and then clicks the reset button, the original value of "CA" is restored. The form's onReset event handler displays a message indicating that defaults have been restored.
<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>
event, Form.reset, Reset
Executes JavaScript code when a resize event occurs; that is, when a user or script resizes a window or frame.
onResize="handlerText"
This event is sent after HTML layout completes within the new window inner dimensions. This allows positioned elements and named anchors to have their final sizes and locations queried, image SRC properties can be restored dynamically, and so on.
In this example, the open_now function creates the myWin window and captures Resize events. The onResize handler calls the alert_me function which displays a message when a user resizes myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
}
function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}
event
Executes JavaScript code when a select event occurs; that is, when a user selects some of the text within a text or textarea field.
onSelect="handlerText"
The following example uses onSelect in the valueField Text object to call the selectState function.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
event
Executes JavaScript code when a submit event occurs; that is, when a user submits a form.
onSubmit="handlerText"
Submitting a form to a mailto: or news: URL requires the UniversalSendMail privilege. For information on security, see the Client-Side JavaScript Guide.
You can use onSubmit to prevent a form from being submitted; to do so, put a return statement that returns false in the event handler. Any other returned value lets the form submit. If you omit the return statement, the form is submitted.
In the following example, onSubmit calls the validate function to evaluate the data being submitted. If the data is valid, the form is submitted; otherwise, the form is not submitted.
<FORM onSubmit="return validate(this)">
...
</FORM>
See also the examples for Form.
event, Submit, Form.submit
Executes JavaScript code when an unload event occurs; that is, when the user exits a document.
onUnload="handlerText"
Use onUnload within either the BODY or the FRAMESET tag, for example, <BODY onUnload="...">.
In a frameset and frame relationship, an onUnload event within a frame (placed in the BODY tag) occurs before an onUnload event within the frameset (placed in the FRAMESET tag).
In the following example, onUnload calls the cleanUp function to perform some shutdown processing when the user exits a Web page:
<BODY onUnload="cleanUp()">
onLoad
For general information on event handlers, see the Client-Side JavaScript Guide.
For information about the event object, see event.
Table of Contents | Previous
| Next
| Index
Last Updated: 05/28/99 12:01:01
Copyright (c) 1999
Netscape Communications Corporation