无法在 JavaScript 中同时捕获 keydown 和 keypress 事件

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 个不同的 "textareas" 中记录事件类型以及事件的一些其他属性。

我希望它能在第一个文本区域捕获 "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 位置：

无法在 JavaScript 中同时捕获 keydown 和 keypress 事件

Unable to capture keydown and keypress events simultaneously in JavaScript

javascript

events

keypress

keydown