Home arrow JavaScript arrow Page 4 - 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 - Inline and scripted event handlers into action
(Page 4 of 4 )


Indeed, inline event handlers have been in use for a long time. As applications became more complex, a clear need developed to implement HTML and JavaScript code in different layers. Although basic, it’s quite useful to demonstrate how event phases are handled with inline event handlers. Here’s is a sample of this: 

<div id="testdiv" onclick="alert('Reacting to Event bubble phase');">

<p><a href="#">Click here activate the alert method</a></p>


In the previous example, we’ve attached the "onclick" event handler to the <div> element, instead of assigning it directly to the link. However, if we’re using a browser that supports event bubble, by just clicking on the <a> element, the event will traverse the paragraph, reaching the <div> element and firing up the "alert" box. However, since messing up HTML with JavaScript is not recommended, the sample might be rewritten as follows: 

<script language="javascript">

    var div=document.getElementById('testdiv');


          alert('Reacting to Event bubble phase');




And the HTML would be reduced to this:


<div id="testdiv">

<p><a href="#">Click here activate the alert method</a></p>



For both cases, the result is the same, but the last one is definitely the way to go, since we removed the inline event handler from the HTML. 

At this point, we’ve playing around with some core definitions, explaining different techniques for assigning event handling that have been in use for a long time, hopefully as a reminder for choosing the right method when we’re dealing with event handlers nowadays. 

In the browser arena, not so surprisingly, Nestcape and Microsoft came up with different conclusions for event handling. Netscape’s approach was originally based in the capture phase, establishing that any event should be handled when the event was traversing the Web document, going through all of the containing elements, until reaching the target.

On the other hand, Microsoft branched to the event bubble direction, specifying that events should take precedence at the bubble phase. As we can see, the two models are radically opposed. Netscape 4 only supports event capturing, while Internet Explorer only supports event bubbling. Mozilla, Opera 7 and Konqueror support both approaches. Older versions of Opera and iCab support neither. We’ll see more event handling browser implementations in more detail shortly. As an introductory process, it’s more than enough. 


So far, we’ve taken a deeper look at some basic concepts such as assigning event handling, as well as explaining the DOM event flow model and its corresponding phases for Event Capture and Event Bubble. Specifically, in order to take advantage of its abilities and give more event control to Web developers, there are several available methods that offer a new alternative for assigning and manipulating event handlers. In the second part of these series, we’ll be discussing the"attachEvent()" and "addEventListener()"methods, and their different implementations on today’s major browsers. See you soon! 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials