Professional JavaScript | 33 | WebReference

Professional JavaScript | 33

To page 1current pageTo page 3
[previous] [next]

Professional JavaScript

Event Innovations In 4.0 Browsers

The enhancements chosen by Microsoft and Netscape, the two main 4.0 browser vendors aren't that different in their overall functionality, but they do differ in the specific details.

When all the details (and learning) regarding event features for a given vendor are lumped into a pile, that pile is big enough that committing to a single browser suddenly seems very attractive. If you are concerned about portability, you need to make a deliberate decision at the start to keep it simple, or else you will be locked into a particular browser in no time.

Modern Events

The HTML 4.0 standard mandates a set of intrinsic events and these are supported to a lesser or greater degree by both 4.0 browsers. You can download the standard for HTML 4.0 by going to the www.w3c.org Website. In addition to the events already specified in the 3.0 browsers, there are ten general user input events that apply to every tag in the HTML document. These are: onKeyPress, onKeyup, onKeyDown, onClick, onDblClick, onMouseOver, onMouseOut, onMouseMove, onMouseDown and onMouseUp.

For Internet Explorer 4.0 and 5.0, these events are supported as described by the standard. Microsoft has gone to further lengths with their event processing model, describing the exact order in which events fire when multiple events occur.

For Netscape Navigator 4.0, only some objects support all these events. The ones that do are windows, frames, layers and link objects (the <A> tag with the HREF attribute set and the <AREA> tag are link objects). The onMouseMove handler is supported only via JavaScript, not via HTML tag attributes for that browser.

Both browsers support events beyond the HTML 4.0 standard. Netscape 4.0 supports only three: onResize, onDragDrop and onMove. Internet Explorer 4+ supports a multitude. Refer to the specific browser documentation - the detail is beyond this book's scope.

Netscape's lack of support for the ten user input events could be partially worked around by exploiting the support that is present for links. This example illustrates:

<HTML><HEAD>
  <STYLE TYPE="text/css">
     A:link { text-decoration: none; color: none }
  </STYLE>
</HEAD>
<BODY>
  Normal text
  <A HREF="<a href="http://localhost/"">http://localhost/"</a> ONCLICK="return false;" 
                              ONDBLCLICK="return false;">
     <STRONG>Interesting part <P> with tags<P></STRONG>
  </A>
  Normal text
</BODY></HTML>

If any mouse events are required for the <STRONG> tag, then use the event handlers of the surrounding <A> tag, as shown above. Key press and click events can be captured by the window and passed to <A> tag handlers as well - see the discussion further on event hierarchy. Generally speaking, Internet Explorer 4.0 and 5.0 have a much richer event model than Netscape 4.x.

Additional Structure

For Internet Explorer and Netscape 3.0 browsers, event handlers are organized in a common pool: when an event occurs, all the appropriate handlers in the pool are fired. In the 4.0 browsers, handlers are stored in a hierarchy that dictates which handler is the first candidate for a given event. An event may pass through several handlers, but if so, there is a definite order. Since event handlers are properties of JavaScript host objects, the hierarchy follows the browser's specific object model.

The crucial difference between Netscape and Microsoft implementations is that for Netscape, events travel down the hierarchy, for Microsoft they travel up. The Microsoft approach has been adopted by the DOM (Document Object Model) standard:

1

Not all events can flow through the hierarchy. Many of the Internet Explorer 4.0 event handlers, for example, are attached to specific objects. If the matching event occurs, either that object's handler or no handler at all will be called.

Not all objects in the hierarchy are exploited when an event flows through the structure. In the Navigator 4.0 case, only "large" objects like windows, layers and documents get a chance, plus any item at the bottom of the tree that the user interacted with to cause the event in the first place.

Additional Objects

As well as new event handlers and better organized event handlers, the 4.0 browsers also provide more event information. A new JavaScript object called the Event object (Netscape) or event (Microsoft) stores this data.

The event object is handled differently in the two browsers. In the Microsoft case, there is only one event object per browser window. All the event handlers must refer to this object. In the Netscape case, an event object is created for each event and is passed to the handler as an argument. This table gives an at-a-glance comparison of the two styles of event object:

IE 4.0 window.event properties NC 4.0 Event object properties
User input:
type type
altKey, ctrlKey, shiftKey, keyCode, button which, modifiers
Graphical position of event:
screenX, screenY,
clientX, clientY, offsetX, offsetY, x, y
screenX, screenY,
layerX, layerY, pageX, pageY
Items marked out by mouse movements:
fromElement, toElement data
Progress and control information:
reason, returnValue, cancelBubble a separate routing mechanism is
available that uses captureEvents(),
releaseEvents(), routeEvent() and handleEvent()
Document element originating the event:
srcElement, srcFilter target
Special constants
MOUSEDOWN, MOUSEUP, CLICK,
KEYDOWN, KEYUP, KEYPRESS, etc

You can make a JavaScript function that inspects such an object and acts as a general event handler. This is a good way to illustrate how the browsers differ. For Internet Explorer 4.0 such a handler looks like this:

function handy_event_handler()
{
  if ( window.event.type == "click" )
  {
    // do click stuff ...
    return true;
  }
  // and so on for other possibilities...
  return false
}

For Netscape Navigator 4.0, such a handler looks like this:

function handy_event_handler(new_event)
{
  if ( new_event.type == "click" )
  {
    // do click stuff ...
    return true;
  }
  // and so on for other possibilities...
  return false
}

For both browsers, a portable handler that works for simple handler tasks only:

function handy_event_handler(netscape_event)
{
  var real_event;
  real_event = (netscape_event) ? netscape_event : window.event;
  if ( real_event.type == "click" )
  {
    // do click stuff ...
    return true;
  }
  // and so on for other possibilities...
  return false
}
To page 1current pageTo page 3
[previous] [next]


Created: April 4, 2001
Revised: April 4, 2001

URL: http://webreference.com/programming/javascript/professional/chap4/4/