The Navigator Event Model: Capturing Events - Doc JavaScript
Capturing Events
Netscape Navigator 4.0x provides a new way to handle events. In older browsers, the only way to react to an event was to specify an event handler (in HTML or JavaScript) for the desired element. That is, the event was processed by its target. There was no way to catch an event at a level different from the event's target. In Navigator 4.0x, you can capture an event in the window
, layer
, or document
object before the event ever reaches its intended target. For example, you may want the document
object to handle all mouseover
(remember, mouseover
is an event, while onmouseover
is an event handler) events, no matter where they occur in the document.
JavaScript's event capturing model now lets you define functions that capture and handle events before they reach their intended target. By default, all events are captured by their intended target. For example, when the user clicks a button, the click
event handler is normally captured by the button's onclick
event handler. You must explicitly enable this capability for the window
, layer
, and document
objects. The capability can also be turned off at any time. To accomplish these tasks, use the following methods:
window.captureEvents()
layer.captureEvents()
document.captureEvents()
window.releaseEvents()
layer.releaseEvents()
document.releaseEvents()
For example, if you want a document to capture events at all times while the document is loaded, you would execute the window.captureEvents()
when the page loads. The captureEvents()
and releaseEvents()
methods obviously require an argument specifying the type of event to capture. Here are a few examples of how that's done:
window.captureEvents(Event.CLICK);
window.releaseEvents(Event.CLICK);
window.captureEvents(Event.MOUSEDOWN);
window.releaseEvents(Event.MOUSEDOWN);
window.captureEvents(Event.MOUSEUP);
window.releaseEvents(Event.MOUSEUP);
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.releaseEvents(Event.MOUSEDOWN | Event.MOUSEUP);
Notice that the event (not event handler) is spelled in all uppercase. For example, Event.CLICK
is the click
event value, and Event.KEYPRESS
is the keypress
event value. Don't worry about the constant Event
object and the new events, because we'll discuss them later in the column.
You probably noticed from the preceding example that you can specify multiple event values at a time. Simply separate the event values with the pipe character (|). The following script segments are equivalent:
// first segment
window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP);
// second segment
window.captureEvents(Event.CLICK);
window.captureEvents(Event.MOUSEDOWN);
window.captureEvents(Event.MOUSEUP);
You can capture, say, three types of events at the window
level, and then release only one of them. The other two would continue to be captured.
Created: December 16, 1997
Revised: December 16, 1997
URL: https://www.webreference.com/js/column9/capture.html