focus event is onFocus.
onAbort="handlerText"
|
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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
| |
JavaScript 1.1: event handler of |
onBlur="handlerText"
|
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 anonBlurevent handler in aFRAMESETtag has no effect.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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>
event, onChange, onFocus
Select, Text, or Textarea field loses focus and its value has been modified. onChange="handlerText"
|
onChange to validate data after it is modified by a user.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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
JavaScript 1.1: added the ability to return false to cancel the action associated with a click event |
onClick="handlerText"
|
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>
NOTE:
In JavaScript 1.1, on some platforms, returning false in an onClick event
handler for a reset button has no effect.
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=""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
event
onDblClick="handlerText"
|
NOTE:
DblClick is not implemented on the Macintosh.
<form>
<INPUT Type="button" Value="Double Click Me!"
onDblClick="alert('You just double clicked me!')">
</form>
event
onDragDrop="handlerText"
|
data property of the DragDrop event requires the UniversalBrowserRead privilege. For information on security, see the Client-Side JavaScript Guide.
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
onError="handlerText"
|
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:
window.onerror to null means your users won't see JavaScript errors caused by your own code.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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"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>
event, onAbort, onLoad
| |
JavaScript 1.1: event handler of |
onFocus="handlerText"
|
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 anonFocusevent handler in aFRAMESETtag has no effect.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
onFocus 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.
event, onBlur, onChange
onKeyDown="handlerText"
|
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.
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">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.
event, onKeyPress, onKeyUp
onKeyPress="handlerText"
|
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.
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
onKeyUp="handlerText"
|
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
FRAMESET tag. onLoad="handlerText"
|
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.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. width, height
| |
|---|
<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.
event, onAbort, onError, onUnload
onMouseDown="handlerText"
|
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.
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>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.
event
onMouseMove="handlerText"
|
onMouseMove is not an event of any object. You must explicitly set it to be associated with a particular object.
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.
onMouseDown.
event, document.captureEvents
onMouseOut="handlerText"
|
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.
Link.
event, onMouseOver
onMouseOver="handlerText"
|
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.
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/"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.
event, onMouseOut
onMouseUp="handlerText"
|
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.
onMouseDown.
event
onMove="handlerText"
|
| 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. |
|---|
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
onReset="handlerText"
|
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>
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
event, Form.reset, Reset
onResize="handlerText"
|
| Property |
Description
type
| target Indicates the object to which the event was originally sent. width, height
| |
|---|
SRC properties can be restored dynamically, and so on.
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
onSelect="handlerText"
|
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
onSelect in the valueField Text object to call the selectState function.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
event
onSubmit="handlerText"
|
mailto: or news: URL requires the UniversalSendMail privilege. For information on security, see the Client-Side JavaScript Guide.
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.
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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.
event, Submit, Form.submit
onUnload="handlerText"
|
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).
| Property |
Description
type
| target Indicates the object to which the event was originally sent. |
|---|
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.
Last Updated: 05/28/99 12:01:01