Netscape 6, Part III: The Event Model

Setting Event Listeners in Netscape 6

Netscape 6 has a unique event model. It combines the Netscape Navigator 4.x event model with that of Internet Explorer. Events in Navigator propagate downwards from the browser window object to the target object. Any object in the hierarchy can capture the event before it reaches the target object. Events in Internet Explorer propagate in the opposite direction. They bubble from the target object towards the browser window object. Any object can process the event on its way up. Netscape 6 supports both directions. The event dives in from the browser window object to the target object and then bubbles back to the window object. You can specify whether you want to intercept the event during its dive (capture phase) or its ascend (bubbling phase).

Another advantage of the Netscape 6 event model is the ability to specify more than one action per an event type, similarly to how you do it in Internet Explorer 5.x. Netscape Navigator 4.x supports only one action per an event type. If you want to invoke the function buttonClicked() whenever a button is clicked, you would write its event handler as:

onClick = buttonClicked();

But what if you want to specify another function to invoke? That's where Netscape 6 kicks in. Netscape 6 introduced a new event concept, the event listener, which is similar to attachEvent() in Internet Explorer 5.x. You attach an event listener to an object. The event listener listens for a specified event, and when the event occurs, the event listener executes a pre-specified action. You can define several event listeners for the same object, and for the same event type. For example, two separate event listeners can listen to a click event for a specific button, and execute two different actions when the event occurs. You add an event listener by the addEventListener() method:

object.addEventListener(eventType, functionCall, downBool)

where:

eventType is the type of the event you want to listen to. Do not include the "on" prefix. Examples: "mouseover", "click", "mouseout", "mouseup", and "mousedown".
functionCall is the function you want to execute when the event is detected. This is the actual function reference and not a string, so don't include the function name in quotes. If you need to pass parameters to the function, simply pass them in this call, as functionName(param1, param2).
downBool is a Boolean variable (true or false) that tells the listener on which phase to intercept the event. A true value asks the listener to intercept the event on its way down from the browser window object to its target object (capture phase). A false value signals the listener to intercept it on its way up from the target object to the window object (bubbling phase).