Setting Events in Netscape Navigator 4.x

In order to understand the new event handling strategy in Netscape 6, you need to refresh your knowledge of how it is done in Netscape Navigator 4.x. The main idea is that an event is diving, from the window object, through the document object and any other intermediate objects, until it reaches the target object. Netscape introduced the concept of event capturing. You can intercept an event at any object, before it reaches the final target element. Any such interception always occurs before the event reaches the target element. There is no way in Netscape Navigator 4.x to intercept an event after it reaches the target element. Let's demonstrate this strategy.

The piece of code below creates a button and two event handlers. We attach the first event handler to the window object. In order to do so, you need to instruct the window object to capture CLICK events:

window.captureEvents(Event.CLICK);

And then attach the action to this event:

window.onclick = windowClicked; // onclick is an event handler

We attach the second event handler to the button itself:

onClick="buttonClicked()"

Here is the full listing of the code:

<SCRIPT LANGUAGE="JavaScript">
<!--

function buttonClicked(e) {
  alert("You clicked a button!");
  return true;
}

function windowClicked(e) {
  alert("You clicked in the window!");
  return true;
}
if (window.captureEvents)
  window.captureEvents(Event.CLICK); // CLICK is an event
window.onclick = windowClicked; // onclick is an event handler

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="click here" NAME="myButton"
  onClick="buttonClicked()">
</FORM>

Get on Netscape Navigator 4.x and click the button below. You can see by the alert box that pops up ("You clicked in the window!") that the click event has been captured successfully by the window object, before it reaches the button. You won't get the button's alert box ("You clicked a button!"), because, by default, an event is always captured and not routed deeper to the next object in the hierarchy:

Next: How to set event handlers in Internet Explorer