JavaScriptでイベントを使用する方法

2024-03-15 12:29 JavaScript イベントリスナー
  1. イベントハンドリング: イベントハンドリングは、特定のイベントが発生したときに実行される関数を定義する方法です。例えば、ボタンがクリックされたときにメッセージを表示する場合、以下のようなコードを使用します。
function showMessage() {
  console.log("ボタンがクリックされました！");
}
var button = document.getElementById("myButton");
button.addEventListener("click", showMessage);

上記の例では、idが"myButton"であるボタン要素を取得し、"click"イベントが発生したときにshowMessage関数が実行されるように設定しています。

  1. イベントリスナー: イベントリスナーは、イベントハンドラーを登録する別の方法です。上記の例をイベントリスナーを使用して書き換えると以下のようになります。
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("ボタンがクリックされました！");
});

この場合、無名の関数が直接イベントリスナーとして使用されています。

  1. DOMイベントタイプ: JavaScriptではさまざまなイベントタイプがサポートされています。一部の一般的なイベントタイプには、"click"（クリック）、"mouseover"（マウスオーバー）、"keydown"（キーダウン）などがあります。以下に、キーダウンイベントを処理する例を示します。
document.addEventListener("keydown", function(event) {
  console.log("キーが押されました:" + event.key);
});

上記の例では、ページ上のどの要素でもキーダウンイベントが検出され、押されたキーがコンソールに表示されます。

このように、JavaScriptではさまざまなイベントを使用して、ユーザーアクションやブラウザ内の状態変化に反応することができます。これにより、対話的なWebページやアプリケーションを作成することができます。