| eventThe event object contains properties that describe a JavaScript event, and is passed as an argument to an event handler when the event occurs.
Client-side object | | Implemented in | Navigator 4.0 | In the case of a mouse-down event, for example, the event object contains the type of event (in this case MouseDown), the x and y position of the cursor at the time of the event, a number representing the mouse button used, and a field containing the modifier keys (Control, Alt, Meta, or Shift) that were depressed at the time of the event. The properties used within the event object vary from one type of event to another. This variation is provided in the descriptions of individual event handlers. For more information, see "General Information about Events". Created byevent objects are created by Communicator when an event occurs. You do not create them yourself. SecuritySetting any property of this object requires the UniversalBrowserWrite privilege. In addition, getting the data property of the DragDrop event requires the UniversalBrowserRead privilege. For information on security in Navigator 4.0, see Chapter 7, "JavaScript Security," in the JavaScript Guide. Property SummaryNot all of these properties are relevant to each event type. To learn which properties are used by an event, see the "Event object properties used" section of the individual event handler.
target | String representing the object to which the event was originally sent. (All events) | type | String representing the event type. (All events) | data | Returns an array of strings containing the URLs of the dropped objects. Passed with the DragDrop event. | height | Represents the height of the window or frame. | layerX | Number specifying either the object width when passed with the resize event, or the cursor's horizontal position in pixels relative to the layer in which the event occurred. Note that layerX is synonymous with x. | layerY | Number specifying either the object height when passed with the resize event, or the cursor's vertical position in pixels relative to the layer in which the event occurred. Note that layerY is synonymous with y. | modifiers | String specifying the modifier keys associated with a mouse or key event. Modifier key values are: ALT_MASK, CONTROL_MASK, SHIFT_MASK, and META_MASK. | pageX | Number specifying the cursor's horizontal position in pixels, relative to the page. | pageY | Number specifying the cursor's vertical position in pixels relative to the page. | screenX | Number specifying the cursor's horizontal position in pixels, relative to the screen. | screenY | Number specifying the cursor's vertical position in pixels, relative to the screen. | which | Number specifying either the mouse button that was pressed or the ASCII value of a pressed key. For a mouse, 1 is the left button, 2 is the middle button, and 3 is the right button. | width | Represents the width of the window or frame. |
ExampleThe following example uses the event object to provide the type of event to the alert message. <A HREF="http://home.netscape.com" onClick='alert("Link got an event: " + event.type)'>Click for link event</A> The following example uses the event object in an explicitly called event handler. <SCRIPT> function fun1(evnt) { alert ("Document got an event: " + evnt.type); alert ("x position is " + evnt.layerX); alert ("y position is " + evnt.layerY); if (evnt.modifiers & Event.ALT_MASK) alert ("Alt key was down for event."); return true; } document.onmousedown = fun1; </SCRIPT>
onAbortExecutes 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).
Event handler for | Image | Implemented in | Navigator 3.0 |
SyntaxonAbort="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. |
ExamplesIn 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!')"> See alsoonError , onLoad For general information on event handlers, see "General Information about Events". For information about the event object, see event .
onBlurExecutes 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 | Navigator 2.0 Navigator 3.0: event handler of Button , Checkbox , FileUpload , Frame , Password , Radio , Reset , Submit , and Window |
SyntaxonBlur="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
DescriptionThe 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 Navigator 3.0, on some platforms placing an onBlur event handler in a FRAMESET tag has no effect. Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. |
ExamplesExample 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> See alsoonChange , onFocus For general information on event handlers, see "General Information about Events". For information about the event object, see event .
onChangeExecutes JavaScript code when a change event occurs; that is, when a Select , Text , or Textarea field loses focus and its value has been modified.
SyntaxonChange="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
DescriptionUse onChange to validate data after it is modified by a user. Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. |
ExamplesIn 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 alsoonBlur , onFocus For general information on event handlers, see "General Information about Events". For information about the event object, see event .
onClickExecutes 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).
SyntaxonClick="handlerText" Parameters
handlerText
| JavaScript code or a call to a JavaScript function. |
Event properties used
type | Indicates the type of event. | target | Indicates the object to which the event was originally sent. | When a link is clicked,
layerX , layerY ,
pageX , pageY ,
screenX , screenY | Represent the cursor location at the time the event occurred. | which | Represents 1 for a left-mouse click and 3 for a right-mouse click. | modifiers | Contains the list of modifier keys held down when the event occurred. |
DescriptionFor 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: - 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 Navigator 3.0, on some platforms, returning false in an onClick event handler for a reset button has no effect.
ExamplesExample 1: Call a function when a user clicks a button. Suppose you have created a JavaScript function called compute . You can execute the compute function when the user clicks a button by calling the function in the onClick event handler, as follows:<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> In the preceding example, the keyword this refers to the current object; in this case, the Calculate button. The construct this.form refers to the form containing the button.For another example, suppose you have created a JavaScript function called pickRandomURL that lets you select a URL at random. You can use onClick to specify a value for the HREF attribute of the A tag dynamically, as shown in the following example:<A HREF="" onClick="this.href=pickRandomURL()" onMouseOver="window.status='Pick a random URL' return true"> Go!</A> In the above example, onMouseOver specifies a custom message for the browser's status bar when the user places the mouse pointer over the Go! anchor. As this example shows, you must return true to set the window.status property in the onMouseOver event handler.Example 2: Cancel the checking of a checkbox. The following example creates a checkbox with onClick . The event handler displays a confirm that warns the user that checking the checkbox purges all files. If the user chooses Cancel, onClick returns false and the checkbox is not checked.<INPUT TYPE="checkbox" NAME="check1" VALUE="check1" onClick="return confirm('This purges all your files. Are you sure?')"> Remove files See alsoFor general information on event handlers, see "General Information about Events". For information about the event object, see event . |
| |