About This Product
FontsMadeEasy.com
 
Search This Database:
| Over 5000 Free Fonts | Tutorials | Javascript Forum | Other Javascript Resources | Cheat Sheet
Tutorial archive
General Questions
Javascript 1.2
Navigation
Numbers
Strings
Object Model
Reference Manual
Dialog
Windows
Frames
Forms
Images
Mouse Events
Colors
File Access
Control Status Bar
Dates and Time
Cookies
Client Information
Bookmarklets







[Contents] [Previous] [Next] [Last]


Chapter 1

Event Model

JavaScript's event model includes several new events, an event object, and the ability to capture and handle events before they reach their intended target. This section contains the following information:

New events are described in the Events section.

The event Object

The event object contains properties that describe a JavaScript event, and is passed as an argument to an event handler when the event occurs. In the case of a mousedown 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 individual event descriptions.

JavaScript supports the following events. This document describes the new events.
Abort KeyDown MouseUp
Blur KeyPress Move
Click (revised) KeyUp Reset
Change Load Resize
DblClick MouseDown Select
DragDrop MouseMove Submit
Error MouseOut (revised) Unload
Focus MouseOver (revised)

Details of the event object

Syntax

event.propertyName

Argument of

All event handlers.

Properties

The following properties are specific to an event and are passed with the event object. To learn which properties are used by an event, see the "Event object properties used" section of the individual event.

Property  Description 
type
String representing the event type.
target
String representing the object to which the event was originally sent.
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.
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.
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.
data
Returns an array of strings containing the URLs of the dropped objects. Passed with the dragdrop event.

Example

The 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 LANGUAGE="JavaScript1.2">
function fun1(e) {
   alert ("Document got an event: " + e.type);
   alert ("x position is " + e.layerX);
   alert ("y position is " + e.layerY);
   if (e.modifiers & Event.ALT_MASK)
      alert ("Alt key was down for event.");
   return true;
}
document.onmousedown = fun1;
</SCRIPT>

Event Capturing

You can now have a window or document 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 wanted to capture all click events occurring in a window.

NOTE: 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 enableExternalCapture.

First, you need to set up the window to capture all Click events:

window.captureEvents(Event.CLICK);

The argument to 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 or (|). For example:

window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)

Next, you need to define a function that handles the event. The argument e is the event object for the event.

function clickHandler(e) {
   //What goes here depends on how you want to handle the event.
   //This is described below.
}

You have four options for handling the event:

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.

function clickHandler(e) {
   var retval = routeEvent(e);
   if (retval == false) return false;
   else return true;
}

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

window.onClick = clickHandler;

Example

In the following example, the window and document capture and release events:

<HTML>
<SCRIPT LANGUAGE="JavaScript1.2">
function fun1(e) {
   alert ("The window got an event of type: " + e.type + 
     " and will call routeEvent.");
   window.routeEvent(e);
   alert ("The window returned from routeEvent.");
   return true;
}
function fun2(e) {
   alert ("The document got an event of type: " + e.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] [Last]