Handling events with the DOM – Part I - Understanding the DOM event flow: Event Capture and Event Bubble
(Page 3 of 4 )
Detecting events and assigning the proper event handlers with the DOM is really a straightforward process, introducing a new manner for doing this. What’s more, the two conventional approaches previously described are perfectly supported and valid. For a complete understanding of assigning event handlers with the DOM, it’s really necessary first to explain the way that events are handled within its context.
Let’s assume we’re representing an extremely common situation, where the user passes the mouse over a regular link present in a Web document. From a user’s point of view, the process consists of just hovering on the link and that’s all. Period. On the other hand, for the DOM, things are more complex and technical, generating a set of processes that involves two phases, called Event Capturing and Event Bubbling respectively. According to the previous example, when a user is passing the mouse over the link, these are the events that take place, in the following order:
The user moves the mouse over the document.
The user moves the mouse over any tag containing the target <a> element.
The user moves the mouse over the specific target <a> element.
The two processes prior to reaching the target <a> element are defined as taking place at the event capturing phase. Once the event has reached the target, it travels back in the following way:
The two last steps involve the event bubbling phase.
As we can see, the complete process, including the two phases, is quite lengthy, and considerably different from a user’s point of view. In order to clarify this explanation, here are a couple of diagrams that show the entire event, as interpreted by theDOM:
The above images illustrate the event capturing and the event bubble phases, according to the model implemented by the W3CDOM. As we’ll see shortly, there are significant differences between the way that today’s browsers support event bubbling and event capturing.
As we can deduce from the above example diagrams, the concept of Event Capture basically references the phase when the event is intercepted, or more familiarly when the event is traveling through the document, downwards, traversing all of the containing elements of the target, until it reaches the target itself. In the opposite way, Event Bubble references the phase when the event is traveling from the target element upwards, traversing the containing elements of the target, to the topmost element, that is, the document element.
Certainly, NS4 has been supporting event capturing for a long time with the method:
element.captureEvents()
On the other hand, IE4 was the first major browser that offered event bubble capabilities. It's worth noting that Microsoft was an early implementer of many W3C working drafts and recommendations, but in the event handling area, it certainly has adopted several approaches that differ noticeably from the proposed W3C DOM standards.
Now, let’s step back to some practical concepts and give a better idea of event bubble and capturing definitions. Let’s present an example using some basic HTML markup and both approximations: inline and scripted event handlers.
Next: Inline and scripted event handlers into action >>
More JavaScript Articles
More By Alejandro Gervasio
/ 11 
