Netscape Navigator Event Propagation

When an event is fired in a Netscape browser, the event travels through each of the objects in the object hierarchy—window, document, layer—before it reaches the element that was the target of the event. Without any instructions to the contrary, these objects simply pass the event down the hierarchy. If you wish to capture the events at any one of these object levels, you need to use the captureEvent() method for any of the window, document, or layer objects.

The captureEvent() method requires one parameter that will tell the corresponding object which type of event to capture. This parameter can be one of several static properties of the Event object:

You can specify several event types to be captured with one call to the captureEvent() method by using the bitwise operator or (|). For example, if you wanted to capture several of the mouse events, you could use the following call to the captureEvent() method:

captureEvent( Event.MOUSEDOWN | Event.MOUSEUP | Event.CLICK |

Event.MOUSEOVER | Event.MOUSEOUT );

After specifying which event to capture, you still need to write handler functions for each event. You tell the object which handler function goes with which event by setting the object's event handler properties, like this:

document.mouseover = imageRollOver;

document.mouseout = imageRollBack;

When an event handler function is called, it is automatically passed the event object as a parameter. The function can then query information about the event, such as where the mouse was at the time, what modifier keys were used, and what the intended target for the event was.

function imageRollOver( event )

{

<statements>

}



function imageRollBack( event )

{

<statements>

}

A Navigator event supports the following Navigator-specific properties:

• Data. Returns a string array that contains the URL of any dropped objects. Netscape only.

• layerX/layerY. Synonyms for the x/y properties of the event object.

• Modifiers. Captures the document's mouse clicks. Syntax is:

   document.onClick="<statements>"
  
  

• pageX/pageY. These properties return the point at which the cursor was when the event occurred in relation to the page.

• screenX/screenY. These properties return the point at which the cursor was when the event occurred in relation to the screen.

• target. This property contains a reference to the object to which the event was originally sent.

• Type. This property returns a string containing the vent type, click, key down, etc.

• Which. This property returns which mouse button or key was pressed. For the mouse, 1 = left button, 2 = middle button, and 3 = right button. For keys, this property is the ASCII value of the key.

Some events may not have information in each property; whether they do or not depends on what type of events they are. To make sure the event handlers for the top-level objects— window, document, and layer—work immediately when the page loads, it would be a good idea to put the code to capture them in the onLoad event handler for the object, like this:

document.onload = loading;

function loading( event )

{

document.onclick = clicked;

document.ondblclick = dblClicked;

}



function clicked( event )

{

<statements>

}



function dblClicked( event )

{

<statements>

}

This will ensure that the event handlers are set up before any events of that type can occur.

It is often necessary, after capturing an event, to send the event to a different object for handling. There are two separate ways to do this. The routeEvent() method of the window and document objects allows an event to be transferred to its intended target. The routeEvent() method requires that the event object be passed to the event handler function as a parameter. The second way to pass an event to a different object is by the object's handleEvent() method. Every object that has event handler capabilities has the handleEvent() method. The handleEvent() method takes one parameter, the event object passed to the event handler function.

Sometime in the execution of the code on your page, it may be necessary to release events that were previously captured. All top-level objects in the Navigator hierarchy have the method releaseEvents(), which will turn off event capturing for that object. Just like the captureEvents() method, the releaseEvents() method requires one parameter that will specify which event or events are to be released.

Comment an article   Name   E-mail    Title Available characters: 4000  Notify me of follow-up comments Enter what you see:

No comment posted