Unable to capture keydown and keypress events simultaneously in JavaScript -

this 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 trying capture "keydown" , "keypress" events anywhere on document object. have added 2 events listener document object. both of them handled same logevent handler. handler logs event type along other properties of event in 2 different "textareas".

i hoping capture "keydown" events in first textarea, , "keypress" events in second. instead capture "keydown" events in both areas.

prevent default keeps firing it. comment out , watch both events 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"/>