Routing Events: Event Redirection (Netscape)
February 15,1999
Once the event has been captured, it is handled by
the capturing object's registered event handler. In our example
this has been windowHandleClick(). Normally,
once windowHandleClick() has completed, that's the end
of the line. The flying arrow hits the ground, as it
were. There are many cases, though, where we might want the
event to continue soaring into more targets before it
ceases its flight.
The routeEvent() method provides one way to
direct the course of the event once it has passed through
its intercepting event handler. Calling routeEvent()
causes the browser to look for another object which
is capturing this same event. Remember that only three
objects can capture events -- window, document, and layer
-- so the next object must be one of the remaining two,
in order of the pecking order stated earlier.
Thus, imagine that both window and document are set to
capture the Click event.
window.captureEvents(Event.CLICK);
document.captureEvents(Event.CLICK);
Calling routeEvent() from within the window
object's onClick event handler will send the event
to document, since it is the next object in the pecking
order capturing this event.
Of course, this means that document, too, must have a
registered event handler for the Click event. In
case neither of the remaining two objects are capturing
the event in question the browser will send the event to
its original target, such as the form field button.
The following example, building on the previous, adds
event capturing at the document level. The Click
event is bounced to the document via a routeEvent()
call. Within the document's onClick event handler
the event is then bounced to its original target via another
routeEvent().
<html>
<head>
<script language="JavaScript">
function windowHandleClick(evt)
{ alert("The window has just intercepted a "+evt.type+" event!");
routeEvent(evt);
}
function docHandleClick(evt)
{ alert("Document sees a "+evt.type+" event!");
routeEvent(evt);
}
window.captureEvents(Event.CLICK);
window.onclick=windowHandleClick;
document.captureEvents(Event.CLICK);
document.onclick=docHandleClick;
</script>
<body>
<form>
<input
type="button"
name="button1"
value="Click me!"
onClick="location='newpage.html';">
</form>
</body>
</html>
|
The important quality to remember about routeEvent()
is that you cannot direct the event at a specific
target; rather, the event simply passes on to the next target
in the hierarchy, from other capturing objects to
the original target element.
Re-directing the Event
The final alternative to routing an event is to send
it off at a particular target. In this way, our capturing
object receives the event, may or may not do something,
and then hands it off to a specified target element. That
target element will then handle the event however it is
registered to handle an event of that type, if at all.
Imagine that our example page contains two buttons. We
can rig the page so that any Click event is routed
to the second button, handled by that button's onClick
event handler. The handleEvent() method is
called from the target element we wish to specify. For example,
here we modify our onClick event handler
for the capturing window object so that it does nothing but
hand off the event to a fictional second button on
the page.
function windowHandleClick(evt)
{ document.forms[0].button2.handleEvent(evt);
}
Don't be confused by the passing of evt between
each call -- that simply passes around a clone of the
event object in case the event handlers wish to probe
its properties.
If we suppose that the event handler for button2 has
been defined thusly,
<input
type="button"
name="button2"
value="Action!"
onClick="location='http://www.yahoo.com';">
Then any Click event on the page will be captured
by the window object and directed to button2, which
will navigate to Yahoo!, as per its event handler.
In summary, we've seen that in Netscape you can either
allow events to behave as normal at their original target
elements or, like rascally rabbits, capture them and have
your way. You may intercept them and prevent their target
elements from their usual actions or even direct the
captured events to another target element entirely. In the
end, you can release the events and feel free of conscience.
Next we see how Microsoft has an entirely different
paradigm for controlling the flow of events.
Routing Events: Event Capturing (Netscape)
Events in JavaScript: An Inside Look
Routing Events: Event Bubbling (Microsoft)
|
