javascript

Chapter 12: Events
All modern browsers support event bubbling, although there are some variations on how it is
implemented. IE 5.5 and earlier skip bubbling to the < html > element (going from < body > directly to
document). Firefox, Chrome, and Safari continue event bubbling up to the window object.
Event Capturing
The Netscape Communicator team came up with an alternate event flow called event capturing . The
theory of event capturing is that the least specific node should receive the event first and the most
specific node should receive the event last. Event capturing was really designed to intercept the event
before it reached the intended target. If the previous example is used with event capturing, clicking the
< div > element fires the click event in the following order:
1. document
2. < html >
3. < body >
4. < div >
With event capturing, the click event is first received by the document and then continues down the
DOM tree to the actual target of the event, the < div > element. This flow is illustrated in Figure 12 - 2 .
Document
1
Element html
2
Element body
3
Element div 4
Figure 12-2
Although this was Netscape Communicator ’ s only event flow model, event capturing is currently
supported in Safari, Chrome, Opera, and Firefox. All three actually begin event capturing at the
window - level event despite the fact that the DOM Level 2 Events specification indicates that the events
should begin at document .
DOM Event Flow
The event flow specified by DOM Level 2 Events has three phases: the event capturing phase, at the
target, and the event bubbling phase. Event capturing occurs first, providing the opportunity to intercept
events if necessary. Next, the actual target receives the event. The final phase is bubbling, which allows a
final response to the event. Considering the simple HTML example used previously, clicking the < div >
fires the event in the order indicated in Figure 12 - 3 .
367