Professional JavaScript For Web Developers

All about Events
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).
1
document
Figure 9-4
2
div
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 element is clicked in a DOMcompliant
browser, the event flow proceeds as shown in Figure 9-5.
1
window 8
2
document
7
bubbling phase
capturing phase
3
body
6
4
div 5
Figure 9-5
Note that because the target of the event (the element) is the most specific element (and therefore,
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.
265