Most events by themselves are not very interesting without some additional information. For example, the onmousedown event is not very useful unless you know which mouse buttons are pressed and possibly where the mouse is positioned. Keyboard events are useless unless you know which key is pressed.
Dynamic HTML exposes a language-independent mechanism for accessing information related to an event and controlling whether the event bubbles and whether the default action occurs. This information is exposed through an event object, which is a property of the window object.
Before an event is fired, this event object is initialized with the current state of the keyboard and mouse. The event object gives access to the event parameters and provides control over event bubbling and the default action. The event object always exposes at minimum the following set of properties for identifying the element that originated the event sequence and for controlling event bubbling and the default action:
The srcElement property returns the element that first generated the event. For example, when you click on the home.gif image in the HTML sample at the beginning of this chapter, the image is the srcElement property while the event bubbles through the anchor, the body, and the document.
The cancelBubble property is used to stop an event from bubbling up the hierarchy. By default, this property is false and the event bubbles up. Assigning true to this property stops the current event from bubbling. Setting this property to true stops only the current instance of the event from bubbling, however; it does not prevent future events from bubbling.
The returnValue property is used primarily to override the default action of an event. Not all events have default actions. However, if you write code that adds behavior because of an event, always cancel the default so that if a default action is added to the event in the future, the page's behavior will not change. To cancel the default action, this property should be set to false.
The returnValue property is used most often to override the default action of the event, but some events use the returnValue property differently. This again reinforces the separation of event bubbling and default actions.
NOTE: JavaScript supports returning values directly to an event handler using the return keyword. The return keyword updates the returnValue property of the event object when the event handler returns control to the browser.
The event object is established at each event sequence. Therefore, any assignments to the event object apply only to that instance of the event sequence. The next time an event occurs, the event object is reset. Canceling a default action, for example, cancels only the default action for the current event, not for all subsequent events. For this reason, an event handler—not the code that immediately executes during the download of the page—should access the event object.
The event object exposes the type of the event through the type property. The type property returns the event name in all lowercase without the on prefix. For example, onmousedown is returned as mousedown, onclick as click, and so on. The advantage in knowing the type of event is that a single event handler can distinguish among and process multiple events:
function handleEvent() {
// Run common event handler.
switch (event.type) {
case "click":
// Handle onclick event.
break;
case "mousedown":
// Handle onmousedown event.
break;
}
}
// Hook up events to handleEvent event handler.
document.onclick = handleEvent;
document.onmousedown = handleEvent;
The event object exposes all parameters of the built-in events as properties. For example, information about the current mouse pointer position is available to all events. Some information is available only during a particular event. Mouse events also provide access to the current state of the mouse buttons. These parameters are initialized and updated prior to the firing of the event. This example shows how to access event parameters:
<SCRIPT FOR="document" EVENT="onmousedown()" LANGUAGE="JavaScript">
// Output the state of the mouse button whenever it is pressed.
alert("x:" + event.clientX);
alert("y:" + event.clientY);
alert("button:" + event.button);
alert("Source Element:" + event.srcElement.tagName);
</SCRIPT>
The event object exposes properties that represent the mouse pointer location based on different coordinate systems. The following table lists these mouse event properties.
| Property | Description |
| clientX, clientY | The horizontal and vertical coordinates of the mouse pointer relative to the client area of the window. |
| offsetX, offsetY | The horizontal and vertical coordinates of the mouse pointer relative to the rendering context. |
| screenX, screenY | The horizontal and vertical coordinates of the mouse pointer relative to the screen. |
Figure 3-1 illustrates the relationship between the different coordinates. The creation of coordinate systems and rendering contexts is discussed in Chapter 12, "Dynamic Positioning." The values of these properties are constant through any event firing sequence, and these coordinates are established for all events, not just mouse events.
Figure 3-1. Coordinate system origins for the event object's mouse position properties.
The event object also exposes properties that represent the current keys and mouse buttons that are pressed at the time of the event.
| Parameter | Value | ||||||||
| button | The current set of mouse buttons pressed:
|
||||||||
| ctrlKey | A Boolean value that indicates whether the Ctrl key is pressed. | ||||||||
| altKey | A Boolean value that indicates whether the Alt key is pressed. | ||||||||
| shiftKey | A Boolean value that indicates whether the Shift key is pressed. |
These properties are useful when you are writing a global event handler for the document. Using the mouse coordinates with the elementFromPoint or rangeFromPoint method on the document, you can check whether the mouse pointer is on a specific element or text:
<SCRIPT EVENT="onkeypress()" FOR="document" LANGUAGE="JavaScript">
// Determine the element the mouse is on when a key is pressed.
// The fromPoint methods are based on client coordinates.
var e = document.elementFromPoint(event.clientX, event.clientY);
if ("H1" == e.tagName) {
// Do something when a key is pressed while the mouse pointer
// is on an H1 element.
}
</SCRIPT>