Unable to capture keydown and keypress events simultaneously in JavaScript

Question

This is my code on JSFiddle - http://jsfiddle.net/zoqtmahq

The HTML:

<h2>JavaScript Capture Keyboard Input</h2>
<h3>keydown event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<h3>keypress event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<input type="button" value="Clear"/>

The JS:

function clearEvent() {
    document.getElementsByTagName('textarea')[0].value = "";
    document.getElementsByTagName('textarea')[1].value = "";
}

function logEvent(event) {
    event.preventDefault();
    document.getElementsByTagName('textarea')[0].value += event.type + " " + event.charCode + " " + event.keyCode +  "\r\n";
    document.getElementsByTagName('textarea')[1].value += event.type + " " + String.fromCharCode(event.charCode) + " " + event.keyCode +  "\r\n";
}

document.addEventListener('keydown', logEvent, false);
document.addEventListener('keypress', logEvent, false);

document.getElementsByTagName("input")[0].addEventListener("click", clearEvent, false);

I am trying to capture the "keydown" and "keypress" events anywhere on the document object. So I have added the 2 events as a listener to the document object. Both of them are handled by the same logEvent handler. This handler logs the event type along with some other properties of the event in 2 different "textareas".

I was hoping that it would capture "keydown" events in the first textarea, and the "keypress" events in the second. However what it does instead is capture only the "keydown" events in both the areas.

Answer 1

Prevent default keeps it from firing it. Comment it out and watch both events get triggered.

function clearEvent() {
    document.getElementsByTagName('textarea')[0].value = "";
    document.getElementsByTagName('textarea')[1].value = "";
}

function logEvent(event) {
    //event.preventDefault();
    document.getElementsByTagName('textarea')[0].value += event.type + " " + event.charCode + " " + event.keyCode +  "\r\n";
    document.getElementsByTagName('textarea')[1].value += event.type + " " + String.fromCharCode(event.charCode) + " " + event.keyCode +  "\r\n";
}

document.addEventListener('keydown', logEvent, false);
document.addEventListener('keypress', logEvent, false);

document.getElementsByTagName("input")[0].addEventListener("click", clearEvent, false);

<h2>JavaScript Capture Keyboard Input</h2>
<h3>keydown event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<h3>keypress event</h3>

Type: charCode : keyCode <br>

<textarea rows="10" cols="20" data-roll="none"></textarea><br>

<input type="button" value="Clear"/>