keypressとkeyup - なぜkeyCodeが違うのですか？

Question

関連：ここJavaScript KeyCode vs CharCode

は、あなたが自宅やjsfiddleに試すことができますいくつかのコードです：

el.addEventListener('keyup', function(e) { 
    console.log('Keyup event'); 
    console.log(e.keyCode); 
}); 
el.addEventListener('keypress', function(e) { 
    console.log('Keypress event'); 
    console.log(e.keyCode); 
}); 

なぜのkeyCodeは違うのですか？

私が理解できないのは、私が理解できないのは、キーボードの同じヒットキーで2つのキーイベントが異なるkeyCodeを与える方法です。

PS：これまでのブラウザのサポートについて心配していないので、Chromeでこれを試したところ、驚いて説明が見つかりませんでした。

Answer 1

イベントはまったく異なる目的のためのものです。物理キーを識別するにはkeyupと​​、型付き文字を識別するにはkeypressを使用します。この2つは、さまざまなイベントを伴う基本的に異なるタスクです。 2つを混在させないでください。特に、keypressイベントのkeyCodeイベントは通常は冗長であり、使用しないでください（古いIEでは例外ですが、詳細についてはリンクされたドキュメントを参照してください）。印字可能なキー押下の場合は、通常はwhichとcharCodeと同じですが、ブラウザ間にはいくつかのバリエーションがあります。

Jan Wolter's article on key eventsは、すでに別の回答にリンクされていますが、私にとってこの主題の決定的な言葉であり、それぞれの種類のキーイベントと各ブラウザごとに異なるプロパティが何を返すかを説明する表があります。

Answer 2

正確にその質問に答えるgood article on quirksmode.orgがあります。 Unixpapa's resultsもご覧ください。

Answer 3

私は、ユーザーの入力をフォームの入力からフォームの他の部分にコピーしようとしたときに、1つの違いに遭遇しました。 私が見つけたのは、ユーザーが入力を完了したときにキーを使用して次のラベルに移動するたびに、eventListenerを使用してkeypressを使用したときに、最後のキーボード入力がコピーされたエントリで欠落し、

ので、結論にキーがは、キー入力の結果を脇に残して、押された時にキーが押された後からkeyupは、システムの状態に耳を傾ける一方、キー押下は、瞬間の状態を聞き、は、結果が含まれますキーを押す。