The NS6 event Object

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.