無法在JavaScript中同時捕獲按鍵事件和按鍵事件

Question

這是我在JSFiddle上的代碼-http: //jsfiddle.net/zoqtmahq

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

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

我試圖捕獲文檔對象上任何位置的“ keydown”和“ keypress”事件。 因此，我將2個事件添加為文檔對象的偵聽器。 它們都由相同的logEvent處理程序處理。 該處理程序在2個不同的“文本區域”中記錄事件類型以及事件的其他一些屬性。

我希望它可以在第一個文本區域中捕獲“ keydown”事件，而在第二個文本區域中捕獲“ keypress”事件。 但是，它所做的只是捕獲兩個區域中的“ keydown”事件。

Answer 1

防止默認設置可使其無法觸發。 注釋掉它，看看兩個事件都被觸發。

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

Answer 2

評論以下行：

// event.preventDefault();

簡化示例在JSFidd le位置：