Home arrow JavaScript arrow Page 3 - Handling events with the DOM - Part III
JAVASCRIPT

Handling events with the DOM - Part III


In this third part of our series, we will learn about Event objects, the "type" property, how to determine the target of an event, and more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
May 03, 2005
TABLE OF CONTENTS:
  1. · Handling events with the DOM - Part III
  2. · Another creature in an object-based world: the Event object
  3. · Determining the type of event: the "type" property
  4. · Targeting objects: determining the target of the event
  5. · Focusing on keys: determining which key has been pressed
  6. · The x-y game: determining mouse coordinates
  7. · Buttons from the bottom: detecting mouse buttons

print this article
SEARCH DEVARTICLES

Handling events with the DOM - Part III - Determining the type of event: the "type" property
(Page 3 of 7 )

 

To determine the type of event generated, we use the "type" property. We might easily write a function to detect the type the event. Say we want to display an alert box telling us what type of event was detected. For Nestcape6+ or Mozilla, the code looks like this:

 

detectType=function(e){

    alert(e.type);

}

 

 

And we might call the function (i.e. when the page is loaded) with the statement:

 

window.onload=detectType;

 

For the above example, the alert box will display "load", since we’re invoking the function with an "onload" event handler. In a IE environment, if we wish to know the type of event, the function should be rewritten in the following way:

 

detectType=function(){

    alert(window.event.type);

}

 

Doing so, we’re obtaining the same results as the example given for Netscape and Mozilla. As we can see, it’s tremendously tedious to write a function for each browser type. So, the two above functions might be recoded in a cross-browser fashion, to deal with the different event models. Our final function looks like this:

 

detectType=function(e){

    if(!e){var e=window.event;}

    alert(e.type);

}

 

Now, we’ve checked internally the existence of an event object. If there’s no such object, we’re using IE, so we access instead the "window.event" object. Just invoking the function through several event handlers will display "click", "load", "keypress", and so forth according to the event that fired the function. In order to simplify future examples, we’ll make use of the handy cross-browser version for accomplishing the common tasks inherent to a Web application. Our next objective is to determine the target of the event.

 


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