The NS6+ event Object The event object used in Netscape Navigator 6 is based on the W3C DOM level 2 event object, with a number of properties thrown in from Netscape Navigator 4. Now that W3C is in the act, we'll see more sanity in event handling in the future. You can see the properties of the event object used in Netscape Navigator 6 in Table 15.7, and its methods in Table 15.8. Table 15.7. The Properties of the NS6 event Object Property | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | altKey | | | | x | | | | | | | | Read-only | | True if the Alt key was pressed when the event occurred, false otherwise . | bubbles | | | | x | | | | | | | | Read-only | | Indicates whether an event bubbles; true if so, false otherwise. | button | | | | x | | | | | | | | Read-only | | Holds 1 if the left/primary mouse button was used, and 3 if the right/ secondary mouse button was used. Holds a value of 2 if the middle button was used in a three-button mouse. | cancelBubble | | | | x | | | | | | | | Read/write | | Setting this property to true prevents the event from bubbling further. | cancelable | | | | x | | | | | | | | Read-only | | This property is true if you can cancel an event's default action from occurring. To actually cancel the event's default action, use the preventDefault method. | charCode | | | | x | | | | | | | | Read-only | | Holds the character code for a keyboard event. See "The Keyboard" in this chapter for more information and an example. | clientX | | | | x | | | | | | | | Read-only | | The X coordinate of the event in the client area of the browser, in pixels. Relative to the browser window. | clientY | | | | x | | | | | | | | Read-only | | The Y coordinate of the event in the client area of the browser, in pixels. Relative to the browser window. | ctrlKey | | | | x | | | | | | | | Read-only | | True if the Ctrl key was pressed when the event occurred, false otherwise. | currentTarget | | | | x | | | | | | | | Read-only | | Holds a reference to the object whose event listener is processing the event. | detail | | | | x | | | | | | | | Read-only | | Not used currently; may be used in the future to hold information about the event. | eventPhase | | | | x | | | | | | | | Read-only | | Indicates the event's "phase." A listener function can determine how the event is being processed using this property. The possible values are 1 (the event was captured), 2 (the event is at its intended target), and 3 (the event is bubbling). | isChar | | | | x | | | | | | | | Read-only | | This property is true if a key is a character key on the keyboard (as opposed to a noncharacter key such as an arrow key). | keyCode | | | | x | | | | | | | | Read-only | | Holds the key code associated with a keyboard event. See "The Keyboard" in this chapter for more information and an example. | layerX | | | | x | | | | | | | | Read-only | | The X coordinate of the event in a Netscape Navigator layer, in pixels. | layerY | | | | x | | | | | | | | Read-only | | The Y coordinate of the event in a Netscape Navigator layer, in pixels. | metaKey | | | | x | | | | | | | | Read-only | | True if the Meta key was pressed when the event occurred, false otherwise. | pageX | | | | x | | | | | | | | Read-only | | The X coordinate of the event in the document, in pixels. | pageY | | | | x | | | | | | | | Read-only | | The Y coordinate of the event in the document, in pixels. | relatedTarget | | | | x | | | | | | | | Read-only | | In the onmouseover event, this property holds a reference to the previous element the mouse was over. In the onmouseout event, this property holds a reference to the element the mouse is over now. | screenX | | | | x | | | | | | | | Read-only | | The X coordinate of the event in screen coordinates, in pixels. | screenY | | | | x | | | | | | | | Read-only | | The X coordinate of the event in screen coordinates, in pixels. | shiftKey | | | | x | | | | | | | | Read-only | | True if the Shift key was pressed when the event occurred, false otherwise. | target | | | | x | | | | | | | | Read-only | | Holds the object that was the original target of the event. | timeStamp | | | | x | | | | | | | | Read-only | | Holds an integer value recording the time of the event in the same format as the JavaScript Date object. | type | | | | x | | | | | | | | Read-only | | Holds the type of the event as a string, such as "click" or " mouseup " . | view | | | | x | | | | | | | | Read-only | | Holds a reference to the window object in which the event occurred. | Table 15.8. The Methods of the NS6 event Object Method | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | preventDefault | | | | x | | | | | | | | Returns: Nothing | | Although you can cancel an event by returning false from the event handler, you also can cancel an event with this method, which prevents the browser from performing the default action for the event (such as displaying a struck key in a text field). | | Syntax: event .preventDefault() . | stopPropagation | | | | x | | | | | | | | Returns: Nothing | | Stops further bubbling of the event and stops further event listeners from being informed of the event. In other words, ends further processing of the event following the current event handler. | | Syntax: event .stopPropagation() . | In Netscape Navigator 6, events bubble by default, just as in the Internet Explorer (and unlike Netscape Navigator 4). You also can use the addEventListener method (see the sections "Handling Events in the W3C DOM" and "The addEventListener Method" in Chapter 6) to add event listeners for specific events to objects of your choice and so configure how events are routed in your code. Here's an example. In this case, I'll add onclick event handlers to the window , document , body , and button objects in this code that will indicate whether the event has been captured by a listener or is bubbling. Then I'll add click listeners to the document and form objects, in that order. Here's what the code looks like: (Listing 15-15.html on the web site) <HTML> <HEAD> <TITLE>W3C Capture and Bubbling</TITLE> </HEAD> <BODY> <H1>W3C Capture and Bubbling</H1> <FORM NAME="form1"> <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="buttonClick(event)"> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- window.onclick = windowClick document.onclick = documentClick document.body.onclick = bodyClick document.addEventListener("click", documentClick, true) document.form1.addEventListener("click", formCapture, true) document.form1.addEventListener("click", formBubble, false) function buttonClick(e) { switch (e.eventPhase) { case 1: text = "Captured" break case 2: text = "Seen" break case 3: text = "Bubbling" break } alert(text + " at the button level.") } function windowClick(e) { switch (e.eventPhase) { case 1: text = "Captured" break case 2: text = "Seen" break case 3: text = "Bubbling" break } alert(text + " at the window level.") } function documentClick(e) { switch (e.eventPhase) { case 1: text = "Captured" break case 2: text = "Seen" break case 3: text = "Bubbling" break } alert(text + " at the document level.") } function bodyClick(e) { switch (e.eventPhase) { case 1: text = "Captured" break case 2: text = "Seen" break case 3: text = "Bubbling" break } alert(text + " at the body level.") } function formCapture(e) { alert("Captured at the form level.") } function formBubble(e) { alert("Bubbling at the form level.") } //--> </SCRIPT> </BODY> </HTML> When you click the button in this example, you can watch the progress of the event with alert boxes. The event is first captured by the document and form objects because of the event listeners we've added to those objects, and then bubbles from the button up through the form , body , document , window objects. You can see this example at work in Figure 15.13. Figure 15.13. Event handling in Netscape Navigator 6. As you can see, you can use event bubbling in Netscape Navigator 6, as well as event listeners to track events as you want. And that's it for this chapter. You've seen a lot of JavaScript, including the mouse, keyboard, images, and in-depth event handling. In the next chapter, we'll start taking a look at another favorite JavaScript topic: Dynamic HTML. |