In NN4, the event dives down from the window to the event-generating element.

  1. User action or conditions occur such that the browser can recognize an event occurrence.
  2. The event object is instantly updated.
  3. The event fires. The dive down begins.
    1. Secondary event handler code may handle the event at the window, document, or layer level (see below).
    2. Primary event handler code may handle the event at the source tag level (see Registering Events).

If you want to have some secondary event handler code to run before it gets to the primary event handler code, you must follow these steps to capture the event.

Enable Event Capturing

Use this syntax to capture one or more events:

[window|document|layer].captureEvents(Event.EVENT[ | Event.EVENT2 ...])

EG:

window.captureEvents(Event.CLICK);
document.captureEvents(Event.CLICK | Event.MOUSEDOWN);

Link the Secondary Event Handler

This is just like linking elements to the primary event handler code except that it is for the secondary element. Here is the syntax:

[window|document|layer].onEvent = FunctionReference

EG:

window.onClick = RunMeInstead;

Define the Secondary Event Handler Code

This code take the particular event object as its argument. It can do all sorts of things but it must handle whether the event is stopped, routed, or allowed on its way.

Example

This goes in the header:

<script language="JavaScript">
<!--
var intClicks = 0
function buttonClicked() {
   //This is primary event handler code.
    if (document.layers){
        alert("Clicks after first go to button");
    }else{
        alert("Button pressed in non-NN4")
    }
}

function RunMeInstead(e) {
    //This is secondary event handler code.
    intClicks++
    if (intClicks == 1){
        alert("First click captured by window");
        window.releaseEvents(Event.CLICK);
    }
}

function initialize(){
    var intClicks = 0
    if (document.layers) window.captureEvents(Event.CLICK); // CLICK is an event.
    window.onClick = RunMeInstead;
    /* This onClick is a secondary event handler. This RunMeInstead is a reference to secondary event handler code. */
}
// -->
</script>

This is the body tag:

<body onload="initialize()">

This is the code for the button:

<form>
    <input type="button" value="click here" onClick="buttonClicked()">
</form>

Try out the button below in NN4 and then in any other browser.

Page Modified: (Hand noted: ) (Auto noted: )