Professional JavaScript | 33

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.

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:

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: