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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Handling events with the DOM – Part I - Back to basics: assigning event handlers
(Page 2 of 4 )

 

There are two basic ways of assigning an event handler. The first, most used, and certainly obtrusive technique is embedding it directly into the HTML markup, while the second is just including the event handler within the own piece of JavaScript code. Definitely, this last one is the recommended approach, since it allows us to maintain the HTML and the JavaScript pieces residing in different layers, making the code much more flexible and portable. 

Let’s illustrate the first approach, inserting the event handler inside its own HTML tag, appending it as a regular attribute: 

<a href="http://www.devarticles.com" title="Opens link in a new window" onclick="window.open('http://www.devarticles.com');return false;">Click here for great Web Development articles</a> 

In the above example, we’ve embedded the event handler along with the JavaScript code to be executed. As we can see, the HTML markup is rather dirty using the inline approach. Now, let’s implement the same functionality, this time by inserting the event handler within the JavaScript code. Like this: 

<script language="javascript">

openLink=function(){

     var devlink=document.getElementById('devlink');

     devlink.onclick=function(){

          window.open('http://www.devarticles.com');

          return false;

     }

}

window.onload=openLink;

</script>

 

And rewriting the HTML markup, in the following manner: 

<a href="http://www.devarticles.com" title="Opens link in a new window" id="devlink">Click here for great Web Development articles</a> 

An explanation is in order here. In this second example, we’ve built a completely separate script, inserted the "onclick" event handler within the "openLink()" function, and then executed the script when the page is loaded (utilizing "onload", another event handler). Note how we have dynamically attached a new function to the link, without the need of declaring the function name. Undoubtedly, this last technique is much better and cleaner than the first one. 

Now we’ve grasped the general concept for assigning event handlers. Having explained the two conventional ways to assign event handlers, let’s go one step further and learn a little more about the manner the DOM handles events. 


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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