| onKeyDownExecutes JavaScript code when a KeyDown event occurs; that is, when the user depresses a key.
SyntaxonKeyDown="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. | 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. |
DescriptionA 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. See also onKeyPress, onKeyUp For general information on event handlers, see "General Information about Events". For information about the event object, see event.
onKeyPressExecutes JavaScript code when a KeyPress event occurs; that is, when the user presses or holds down a key.
SyntaxonKeyPress="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. | 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. |
DescriptionA 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. See alsoonKeyDown, onKeyUp For general information on event handlers, see "General Information about Events". For information about the event object, see event.
onKeyUpExecutes JavaScript code when a KeyUp event occurs; that is, when the user releases a key.
SyntaxonKeyUp="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. | 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. |
See alsoFor general information on event handlers, see "General Information about Events". For information about the event object, see event.
onLoadExecutes JavaScript code when a load event occurs; that is, when the browser finishes loading a window or all frames within a FRAMESET tag.
| Event handler for | Image, Layer, Window | | Implemented in | Navigator 2.0
Navigator 3.0: event handler of Image |
SyntaxonLoad="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
DescriptionUse 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. Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. | width, height | For an event over a window, but not over a layer, these represent the width and height of the window. |
ExamplesExample 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 examples for Image. See alsoonAbort, onError, onUnload For general information on event handlers, see "General Information about Events". For information about the event object, see event. |
| |
