--- title: 'Document: keydown イベント' slug: Web/API/Document/keydown_event tags: - API - DOM - Document - Event - KeyboardEvent - Reference - keydown translation_of: Web/API/Document/keydown_event ---
{{APIRef}}

keydown イベントは、キーが押されたときに発生します。

{{domxref("Document/keypress_event", "keypress")}} イベントとは異なり、 keydown イベントはすべてのキーにおいて、文字が入力されるかどうかにかかわらず発生します。

バブリング あり
キャンセル可能 はい
インターフェイス {{domxref("KeyboardEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}

keydown および {{domxref("Document/keyup_event", "keyup")}} イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 {{domxref("Document/keypress_event", "keypress")}} はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown および keyup では65になるのに対し、 keypress では97になります。大文字の "A" はどのイベントでも65と報告されます。

Firefox 65 から、 keydown および {{domxref("Document/keyup_event", "keyup")}} イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}}、またもっと有益な詳細は keydown and keyup events are now fired during IME composition を参照)。 IME 入力中のすべての keydown イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する keyCode の特殊な値のセットです)。

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 何かをする
});

例

addEventListener keydown の例

この例はキーを押すたびに {{domxref("KeyboardEvent.code")}} の値をログ出力します。

<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
<p id="log"></p>
document.addEventListener('keydown', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

{{EmbedLiveSample("addEventListener_keydown_example")}}

onkeydown equivalent

document.onkeydown = logKey;

仕様書

仕様書 状態
{{SpecName('UI Events', '#event-type-keydown')}} {{Spec2('UI Events')}}

ブラウザーの互換性

{{Compat("api.Document.keydown_event")}}

関連情報