Chapter 3
Event Handlers
focus event is onFocus.
onAbort
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).Syntax
onAbort="handlerText"
Parameters
|
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
In the following example, anonAbort 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!')">
See also
event, onError, onLoad
onBlur
Executes JavaScript code when a blur event occurs; that is, when a form element loses focus or when a window or frame loses focus.
| |
JavaScript 1.1: event handler of |
Syntax
onBlur="handlerText"
Parameters
|
Description
Theblur 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 anonBlurevent handler in aFRAMESETtag has no effect.
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
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"Example 2: Change the background color of a window. In the following example, a window's
onBlur="required(this.value)">
onBlur and onFocus event handlers change the window's background color depending on whether the window has focus.
<BODY BGCOLOR="lightgrey"Example 3: Change the background color of a frame. The following example creates four frames. The source for each frame,
onBlur="document.bgColor='lightgrey'"
onFocus="document.bgColor='antiquewhite'">
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%">The following code has the same effect as the previous code, but is implemented differently. The
<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>
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()>Example 4: Close a window. In the following example, a window's
<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>
onBlur event handler closes the window when the window loses focus.
<BODY onBlur="window.close()">
This is some text
</BODY>
See also
event, onChange, onFocus
onChange
Executes JavaScript code when a change event occurs; that is, when aSelect, Text, or Textarea field loses focus and its value has been modified. Syntax
onChange="handlerText"
Parameters
|
Description
UseonChange to validate data after it is modified by a user.
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
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)">
See also
event, onBlur, onFocus
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).JavaScript 1.1: added the ability to return false to cancel the action associated with a click event |
Syntax
onClick="handlerText"
Parameters
|
Event properties used
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/"If the event handler returns false, the default action of the object is canceled as follows:
onClick="return confirm('Load Netscape home page?')">
Netscape</A>
- Buttons--no default action; nothing is canceled
- Radio buttons and checkboxes--nothing is set
- Submit buttons--form is not submitted
- Reset buttons--form is not reset
NOTE:
In JavaScript 1.1, on some platforms, returning false in an onClick event
handler for a reset button has no effect.
Examples
Example 1: Call a function when a user clicks a button. Suppose you have created a JavaScript function calledcompute. 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=""In the above example,
onClick="this.href=pickRandomURL()"
onMouseOver="window.status='Pick a random URL'; return true">
Go!</A>
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
event
onDblClick
Executes JavaScript code when a DblClick event occurs; that is, when the user double-clicks a form element or a link.Syntax
onDblClick="handlerText"
Parameters
|
NOTE:
DblClick is not implemented on the Macintosh.
Event properties used
Examples
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>
See also
event
onDragDrop
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.Syntax
onDragDrop="handlerText"
Parameters
|
Event properties used
Security
Getting thedata property of the DragDrop event requires the UniversalBrowserRead privilege. For information on security, see the Client-Side JavaScript Guide.
Description
TheDragDrop 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.
See also
event
onError
Executes JavaScript code when an error event occurs; that is, when the loading of a document or image causes an error.Syntax
onError="handlerText"
Parameters
|
Description
An error event occurs only when a JavaScript syntax or runtime error occurs, not when a browser error occurs. For example, if you try setwindow.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:
-
null to suppress all JavaScript error dialogs. Setting
window.onerrorto null means your users won't see JavaScript errors caused by your own code. - The name of a function that handles errors (arguments are message text, URL, and line number of the offending line). To suppress the standard JavaScript error dialog, the function must return true. See Example 3 below.
- A variable or property that contains null or a valid function reference.
- Trace errors but let the standard JavaScript dialog report them (use an error handling function that returns false or does not return a value)
- Report errors yourself and disable the standard error dialog (use an error handling function that returns true)
- Turn off all error reporting (set the onError event handler to null)
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
Example 1: Null event handler. In the followingIMG 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"Example 2: Null event handler for a window. The
onError="null">
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>However, if the
window.onerror=null
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">
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>In the following example,
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()">
window.onerror=null suppresses all error reporting. Without onerror=null, the code would cause a stack overflow error because of infinite recursion.
<SCRIPT>Example 3: Error handling function. The following example defines a function,
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>
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"This example produces the following output:
onClick="displayErrors()">
</FORM>
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.htmlExample 4: Event handler calls a function. In the following
Line number: 30
Message: noSuchFunction is not defined
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>
See also
event, onAbort, onLoad
onFocus
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.
| |
JavaScript 1.1: event handler of |
Syntax
onFocus="handlerText"
Parameters
|
Description
The focus event can result from afocus 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 anonFocusevent handler in aFRAMESETtag has no effect.
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
The following example uses anonFocus handler in the valueField Textarea object to call the valueCheck function.
<INPUT TYPE="textarea" VALUE="" NAME="valueField"See also the examples for
onFocus="valueCheck()">
onBlur.
See also
event, onBlur, onChange
onKeyDown
Executes JavaScript code when a KeyDown event occurs; that is, when the user depresses a key.Syntax
onKeyDown="handlerText"
Parameters
|
Event properties used
Description
AKeyDown 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.
Examples
The following example uses theblockA 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">In the function, the
<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>
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.
See also
event, onKeyPress, onKeyUp
onKeyPress
Executes JavaScript code when a KeyPress event occurs; that is, when the user presses or holds down a key.Syntax
onKeyPress="handlerText"
Parameters
|
Event properties used
Description
AKeyPress 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.
Examples
In this example, thecaptureEvents 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;
See also
event, onKeyDown, onKeyUp
onKeyUp
Executes JavaScript code when a KeyUp event occurs; that is, when the user releases a key.Syntax
onKeyUp="handlerText"
Parameters
|
Event properties used
Examples
In this example, thecaptureEvents 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);
See also
event
onLoad
Executes JavaScript code when a load event occurs; that is, when the browser finishes loading a window or all frames within aFRAMESET tag. Syntax
onLoad="handlerText"
Parameters
|
Description
Use theonLoad 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.
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. width, height
| |
|---|
Examples
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"Example 3: Looping GIF animation. The following example displays an image,
onLoad=displayAlert(this)><BR>
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>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
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.')">
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"See also the examples for
onLoad="changeAnimation(this)">
Image.
See also
event, onAbort, onError, onUnload
onMouseDown
Executes JavaScript code when a MouseDown event occurs; that is, when the user depresses a mouse button.Syntax
onMouseDown="handlerText"
Parameters
|
Event properties used
Description
IfonMouseDown 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.
Examples
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 calledcontainer1. 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>In the previous HTML code, the
<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>
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>In the previous code, the
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>
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.
See also
event
onMouseMove
Executes JavaScript code when a MouseMove event occurs; that is, when the user moves the cursor.Syntax
onMouseMove="handlerText"
Parameters
|
Event of
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.
Event properties used
Description
TheMouseMove 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.
Examples
See the examples foronMouseDown.
See also
event, document.captureEvents
onMouseOut
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.Syntax
onMouseOut="handlerText"
Parameters
|
Description
If the mouse moves from one area into another in a client-side image map, you'll getonMouseOut 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.
Event properties used
Examples
See the examples forLink.
See also
event, onMouseOver
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.Syntax
onMouseOver="handlerText"
Parameters
|
Description
If the mouse moves from one area into another in a client-side image map, you'll getonMouseOut 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.
Event properties used
Examples
By default, theHREF 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/"See
onMouseOver="window.status='Click this if you dare!'; return true">
Click me</A>
onClick for an example of using onMouseOver when the A tag's HREF attribute is set dynamically.
See also the examples for Link.
See also
event, onMouseOut
onMouseUp
Executes JavaScript code when a MouseUp event occurs; that is, when the user releases a mouse button.Syntax
onMouseUp="handlerText"
Parameters
|
Event properties used
Description
IfonMouseUp 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.
Examples
See the examples foronMouseDown.
See also
event
onMove
Executes JavaScript code when a move event occurs; that is, when the user or script moves a window or frame.Syntax
onMove="handlerText"
Parameters
|
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. screenX, Represent the position of the top-left corner of the window or frame. |
|---|
Examples
In this example, theopen_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
}
See also
event
onReset
Executes JavaScript code when a reset event occurs; that is, when a user resets a form (clicks a Reset button).Syntax
onReset="handlerText"
Parameters
|
Examples
The following example displays aText 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 properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
See also
event, Form.reset, Reset
onResize
Executes JavaScript code when a resize event occurs; that is, when a user or script resizes a window or frame.Syntax
onResize="handlerText"
Parameters
|
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. width, height
| |
|---|
Description
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, imageSRC properties can be restored dynamically, and so on.
Examples
In this example, theopen_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();
}
See also
event
onSelect
Executes JavaScript code when a select event occurs; that is, when a user selects some of the text within a text or textarea field.Syntax
onSelect="handlerText"
Parameters
|
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
The following example usesonSelect in the valueField Text object to call the selectState function.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
See also
event
onSubmit
Executes JavaScript code when a submit event occurs; that is, when a user submits a form.Syntax
onSubmit="handlerText"
Parameters
|
Security
Submitting a form to amailto: or news: URL requires the UniversalSendMail privilege. For information on security, see the Client-Side JavaScript Guide.
Description
You can useonSubmit 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.
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
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)">See also the examples for
...
</FORM>
Form.
See also
event, Submit, Form.submit
onUnload
Executes JavaScript code when an unload event occurs; that is, when the user exits a document.Syntax
onUnload="handlerText"
Parameters
|
Description
UseonUnload 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).
Event properties used
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
Examples
In the following example,onUnload calls the cleanUp function to perform some shutdown processing when the user exits a Web page:
<BODY onUnload="cleanUp()">
See also
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
