Home arrow JavaScript arrow Page 3 - Handling events with the DOM – Part I

Handling events with the DOM – Part I

In this first article in a three part series, you will learn several of the methods that the Document Object Model offers for capturing and handling events that happen within the context of a Web document.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 12
April 19, 2005
  1. · Handling events with the DOM – Part I
  2. · Back to basics: assigning event handlers
  3. · Understanding the DOM event flow: Event Capture and Event Bubble
  4. · Inline and scripted event handlers into action

print this article

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 user moves the mouse over any tag containing the target <a> element.

  • The user moves the mouse over the document. 

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: 


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. 

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials