Main Page

Event Flow

When Netscape released its source code into the open source community under the name Mozilla, a key
aim of the developers was to adhere to as many of the standards as possible. When there were gaps in
the standards, the Mozilla group looked at working drafts of the standards to fill them. Because of this,
Mozilla’s event model closely follows the DOM standards.
Latecomers Opera and Safari have also recently embraced the DOM standard event model, leaving
Internet Explorer as the main browser without proper support for the DOM event model.
But even with different DOM implementations between browsers, some basic characteristics remain
the same.
Event Flow
Both the development teams for Internet Explorer 4.0 and Netscape Navigator 4.0 decided that support-
ing events was not enough, so each came up with its own form of
event flow
. Event flow means that more
than one element on the page can respond to the same event. What happens when you click a button on
the page? In reality, you are clicking the button, its container, and the page as a whole. Logically, each of
the elements should be able to respond to that event in a specific order. The order of events (the event
flow) is the main difference between event support in IE 4.0 and Netscape 4.0.
Event bubbling
For Internet Explorer, the solution was answered by a technique dubbed
. The basic idea of event
bubbling is that the event fires sequentially from the most specific event target to the least specific (the
object). For instance, you have the following page:
<body onclick=”handleClick()”>
<div onclick=”handleClick()”>Click Me</div>
If a user clicks the
element using IE 5.5, the event bubbles in the following order:
Logically, you can think of the event bubbling in this example as it is mapped in Figure 9-1.
Chapter 9
12_579088 ch09.qxd 3/28/05 11:39 AM Page 262

JavaScript EditorFree JavaScript Editor     Ajax Editor