↑
Main Page

DOM event flow

Some have also called this the

top-down event model

because it works from the top of the DOM hierarchy

to the bottom (see Figure 9-4).

Figure 9-4

DOM event flow

The DOM supports both event capturing and event bubbling, but event capturing occurs first. Both

event flows hit all the objects in the DOM, beginning and ending with the

document

object (most

standards-compliant browsers continue capturing/bubbling up to the

window

object).

Consider once again the simple example shown earlier. When the

<div/>

element is clicked in a DOM-

compliant browser, the event flow proceeds as shown in Figure 9-5.

Figure 9-5

Note that because the target of the event (the

<div/>

element) is the most specific element (and there-

fore, deepest in the DOM tree), it actually receives the event two times in a row, once in the capturing

phase and once in the bubbling phase.

body

document

div

div 5

bubbling phase

window

window 8

capturing phase

div

document

265

All about Events

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