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

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

Handling events with the DOM - Part III - Focusing on keys: determining which key has been pressed
(Page 5 of 7 )


To determine which key the user has pressed, usually we use the "keyCode" property. However, Mozilla and Netscape expose the "which" property to find out the key pressed. First, we should get the ASCII code for the key, and then turn it into the corresponding character. Taking advantage of the "String.fromCharCode()" method, this is quite easy to do. The function to obtain the key pressed is as follows:


function detectKey(e){

    var code;

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


    else if(e.which){code=e.which;}




And we might call it with the statement:




Indeed, key detection is somewhat annoying sometimes, since ďkeypressĒ, "keyup" and "keydown" event handlers are triggered as long as the user keeps the key pressed. In Netscape, the ASCII value of the key is given by the "charCode" property on "keypress" events, and itís present in the "keyCode" property for "keydown" and "keyup" events, while IE stores the Unicode value of the key in the event "keyCode" property for all three key events.


Both the " keydown" and " keyup" events will fire when any modifier key is pressed, such as ALT, CTRL and SHIFT. The "keypress" event can be used instead to capture combinations such as SHIFT-A. For keeping things simple, itís recommended to use only one event handler at once.


Itís time to move forward and learn how to detect the mouse coordinates according to the event generated.


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