↑
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

bubbling

. The basic idea of event

bubbling is that the event fires sequentially from the most specific event target to the least specific (the

document

object). For instance, you have the following page:

<html>

<head>

<title>Example</title>

</head>

<div onclick=”handleClick()”>Click Me</div>

</body>

</html>

If a user clicks the

<div/>

element using IE 5.5, the event bubbles in the following order:

<div/>

<body/>

document

Logically, you can think of the event bubbling in this example as it is mapped in Figure 9-1.

262

Chapter 9

12_579088 ch09.qxd 3/28/05 11:39 AM Page 262