Handling events with the DOM - Part III

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;

    if(e.keyCode){code=e.keyCode;}

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

    alert(String.fromCharCode(code));

}

And we might call it with the statement:

document.onkeypress=detectKey;

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.