KeyDown、KeyPress、KeyUp: 違いは何ですか? それぞれをいつ使用する必要がありますか?

onKeyPress、onKeyUp、onKeyDown について

これら 3 つのイベントの違いを探していると、onKeyPress が onKeyUp と同時に発生するというよくある誤解に遭遇するかもしれません。この混乱を明確にして、各イベントの固有の特性に光を当てましょう。

イベント タイムライン

キー入力イベントのシーケンスには、次の内訳があります:

1. onKeyDown: ユーザーが最初にキーを押したときにトリガーされます。 key.
2. onKeyPress: 非推奨であり、代わりに onKeyDown を使用することをお勧めします。 このイベントは、ユーザーがキーを押したり離したりしたときに発生し、実質的には onKeyDown とonKeyUp.
3. onKeyUp: がトリガーされましたユーザーが前に押したキーを放したとき。

マウス イベントとの類似

これらのキー イベント間の関係を把握するために、対応するマウス イベントとの類似を描いてみましょう。

• onKeyDown: と同等MouseDown
• onKeyPress: Click と同等 (現在は廃止され、onKeyDown に置き換えられています)
• onKeyUp: MouseUp

と同等 ブラウザ例外: WebKit

Web ブラウザの世界では、WebKit は追加の機能を導入することで際立っています。イベント: テキスト入力。 WebKit のイベント シーケンスは次のようになります。

keydown
keypress
textInput     
keyup

実践的なデモンストレーション

これらのイベントの動作を確認するには、次のコード スニペットを実行します。

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

このスクリプトのログキーボードを操作するときにイベント タイプをコンソールに送信します。キーを押したり放したりすると、一連のイベントがはっきりとわかるでしょう。

以上がKeyDown、KeyPress、KeyUp: 違いは何ですか? それぞれをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。