The Cross-Browser Event Model: Introduction - Doc JavaScript

The Cross-Browser Event Model

In Column 9 and Column 10 we discussed the event model in Netscape Navigator 4.0x and Microsoft Internet Explorer 4.0x. In this column we'll show you how to combine these models, so that you can write interactive cross-browser applications.

Internet Explorer 4.0x's event model is based on event bubbling. An event is initially directed to its intended target (the element that generated the event), and then bubbles up the object hierarchy until an event handler captures the event and returns a false value (or sets the cancelBubble property to true).

In Navigator 4.0x an event is first sent to the top of the object hierarchy, the window object. It then travels down the tree, until an event handler captures it. You must explicitly instruct the event to continue its journey (by invoking the routeEvent() or handleEvent() functions) once it is caught by an event handler.

In this column we'll discuss many other differences between the two event models, and we'll show you how to overcome them. You'll learn:

1. How to avoid elements that do not support the same event handler in both browsers.
2. How to capture events at a high level.
3. How to access the event object from within the event processing function.
4. How to utilize the event object's properties.
5. How to detect modifier keys.
6. How to find out what key or mouse button the user pressed.