[Contents] [Previous] [Next] [Index]

Chapter 9
Events and Event Handlers

This chapter contains the event object and the event handlers that are used with client-side objects in JavaScript to evoke particular actions. In addition, it contains general information about using events and event handlers.

Table 9.1 lists the one object in this chapter.

Table 9.1 Event-related object
Object Description
event
Represents a JavaScript event. Passed to every event handler.

Table 9.2 summarizes the JavaScript event handlers.

Table 9.2 Events and their corresponding event handlers.
Event Event handler Event occurs when...
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

JavaScript applications in the browser are largely event-driven. Events are actions that occur usually as a result of something the user does. For example, clicking a button is an event, as is changing a text field or moving the mouse over a link. For your script to react to an event, you define event handlers, such as onChange and onClick.

Defining Event Handlers

If an event applies to an HTML tag, then you can define an event handler for it. The name of an event handler is the name of the event, preceded by "on". For example, the event handler for the focus event is onFocus.

To create an event handler for an HTML tag, add an event handler attribute to the tag. Put JavaScript code in quotation marks as the attribute value. The general syntax 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 event handler for 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

In Navigator 4.0, JavaScript includes event objects as well as event handlers. Each event has an event object associated with it. The event object provides information about the event, such as the type of event and the location of the cursor at the time of the event. When an event occurs, and if an event handler has been written to handle the event, the event object is sent as an argument to the event handler.

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:

For example, suppose you want to capture all click events that occur in a window. First, you need to set up the window to capture click events:

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:

Finally, you need to register the function as the window's event handler for that event:

window.onClick = clickHandler;

Important

If a window with frames wants to capture events in pages loaded from different locations, you need to use captureEvents in a signed script and call Window.enableExternalCapture. In the following example, the window and document capture and release events:

<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>


[Contents] [Previous] [Next] [Index]

Last Updated: 10/31/97 16:34:02


Copyright � 1997 Netscape Communications Corporation