表 9.1 列出了本章的一个对象。

表 9.1 与事件相关的对象

对象	描述
event	Represents a JavaScript event. Passed to every event handler.

表 9.2 总览 JavaScript 事件句柄。

表 9.2 事件及对应的事件句柄。

事件	事件句柄	事件发生的条件……
abort	onAbort	The user aborts the loading of an image (for example by clicking a link or clicking the Stop button).
blur	onBlur	A form element loses focus or when a window or frame loses focus.
change	onChange	A select, text, or textarea field loses focus and its value has been modified.
click	onClick	An object on a form is clicked.
dblclick	onDblClick	The user double-clicks a form element or a link.
dragdrop	onDragDrop	The user drops an object onto the browser window, such as dropping a file on the browser window.
error	onError	The loading of a document or image causes an error.
focus	onFocus	A window, frame, or frameset receives focus or when a form element receives input focus.
keydown	onKeyDown	The user depresses a key.
keypress	onKeyPress	The user presses or holds down a key.
keyup	onKeyUp	The user releases a key.
load	onLoad	The browser finishes loading a window or all of the frames within a FRAMESET tag.
mousedown	onMouseDown	The user depresses a mouse button.
mousemove	onMouseMove	The user moves the cursor.
mouseout	onMouseOut	The cursor leaves an area (client-side image map) or link from inside that area or link.
mouseover	onMouseOver	The cursor moves over an object or area from outside that object or area.
mouseup	onMouseUp	The user releases a mouse button.
move	onMove	The user or script moves a window or frame.
reset	onReset	The user resets a form (clicks a Reset button).
resize	onResize	The user or script resizes a window or frame.
select	onSelect	The user selects some of the text within a text or textarea field.
submit	onSubmit	The user submits a form.
unload	onUnload	The user exits a document.

General Information about Events

定义事件句柄

To create an事件适用对象an HTML tag, add an event handler attribute to the tag. Put JavaScript code in quotation marks as the attribute value. The general语法 is

<TAG eventHandler="JavaScript Code"> where TAG is an HTML tag and eventHandler is the name of the event handler. For example, suppose you have created a JavaScript function called compute. You can cause the browser to perform this function when the user clicks a button by assigning the function call to the button's onClick event handler:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> You can put any JavaScript statements inside the quotation marks following onClick. These statements are executed when the user clicks the button. If you want to include more than one statement, separate statements with a semicolon.

When you create an event handler, the corresponding JavaScript object gets a property with the name of the event handler in lower case letters. (In Navigator 4.0, you can also use the mixed case name of the事件适用对象the property name.) This property allows you to access the object's event handler. For example, in the preceding example, JavaScript creates a Button object with an onclick property whose value is "compute(this.form)".

Chapter 7, "JavaScript Security," in JavaScript Guide contains more information about creating and using event handlers.

Events in Navigator 4.0

Typically, the object on which the event occurs handles the event. For example, when the user clicks a button, it is often the button's event handler that handles the event. Sometimes you may want the Window or document object to handle certain types of events. For example, you may want the document object to handle all MouseDown events no matter where they occur in the document. JavaScript's event capturing model allows you to define methods that capture and handle events before they reach their intended target.

In addition to providing the event object, Navigator 4.0 allows a Window or document to capture and handle an event before it reaches its intended target. To accomplish this, the Window, document, and Layer objects have these new methods:

• captureEvents
• releaseEvents
• routeEvent
• handleEvent (Not a method of the Layer object)

window.captureEvents(Event.CLICK); The argument to Window.captureEvents is a property of the event object and indicates the type of event to capture. To capture multiple events, the argument is a list separated by vertical slashes (|). For example:

window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP) Next, you need to define a function that handles the event. The argument evnt is the event object for the event.

function clickHandler(evnt) {
   //What goes here depends on how you want to handle the event.
   //This is described below.
} You have four options for handling the event:

• Return true. In the case of a link, the link is followed and no other event handler is checked. If the event cannot be canceled, this ends the event handling for that event.
function clickHandler(evnt) { return true; }
• Return false. In the case of a link, the link is not followed. If the event is non-cancelable, this ends the event handling for that event.
function clickHandler(evnt) { return false; }
• Call routeEvent. JavaScript looks for other event handlers for the event. If another object is attempting to capture the event (such as the document), JavaScript calls its event handler. If no other object is attempting to capture the event, JavaScript looks for an事件适用对象the event's original target (such as a button). The routeEvent method returns the value returned by the event handler. The capturing object can look at this return value and decide how to proceed.
function clickHandler(evnt) {
var retval = routeEvent(evnt);
if (retval == false) return false;
else return true;
} Note: When routeEvent calls an event handler, the event handler is activated. If routeEvent calls an event handler whose function is to display a new page, the action takes place without returning to the capturing object.
• Call the handleEvent method of an event receiver. Any object that can register event handlers is an event receiver. This method explicitly calls the event handler of the event receiver and bypasses the capturing hierarchy. For example, if you wanted all click events to go to the first link on the page, you could use:
function clickHandler(evnt) {
window.document.links[0].handleEvent(evnt);
} As long as the link has an onClick handler, the link handles any click event it receives.

window.onClick = clickHandler;

注意

<HTML>
<SCRIPT> function fun1(evnt) {
   alert ("The window got an event of type: " + evnt.type +
      " and will call routeEvent.");
   window.routeEvent(evnt);
   alert ("The window returned from routeEvent.");
   return true;
} function fun2(evnt) {
   alert ("The document got an event of type: " + evnt.type);
   return false;
} function setWindowCapture() {
   window.captureEvents(Event.CLICK);
} function releaseWindowCapture() {
   window.releaseEvents(Event.CLICK);
} function setDocCapture() {
   document.captureEvents(Event.CLICK);
} function releaseDocCapture() {
   document.releaseEvents(Event.CLICK); }
window.onclick=fun1;
document.onclick=fun2; </SCRIPT>
...
</HTML>