NN4 Events by George Hernandez

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

User action or conditions occur such that the browser can recognize an event occurrence.
The event object is instantly updated.
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
Link the Secondary Event Handler
Define the Secondary Event Handler Code
Example

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.

Return true. The event never reaches the primary event handling code, but if the event was a link, the link is followed. EG:
```
function RunMeInstead(e){return true}
```

Return false. The event never reaches the primary event handling code, but if the event was a link, the link is not followed. EG:
```
function RunMeInstead(e){return false}
```

Call routeEvent(). This checks for other event handlers.
- If another non-primary event handler is trying to capture, then call that event handler.
- If no other non-primary event handler is trying to capture, then call the primary event handling code and return that value for routeEvent. Then the secondary event handling code can decide what to do.
- EG:
```
function RunMeInstead(e){
    var routeResult = routeEvent(e)
    if (routeResult == false) return false;
    else return true;
}
```

Call handleEvent(). Have a particular object to handle the captured event. EG:
```
function RunMeInstead(e){window.document.links[0].handleEvent(e)}
```

Call releaseEvents(). You may allow the event to continue on its way. Here is the syntax:
```
[window|document|layer].releaseEvents(Event.EVENT[ | Event.EVENT2 ...])
```

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: 2007-08-28 17:31:18Z) (Auto noted: 2007-11-17 06:42:15Z)