JavaScriptのイベントリスナーの使い方

以下に、いくつかの一般的なイベントリスナーの使い方とコード例を示します。

クリックイベントリスナー: ボタンがクリックされたときに実行されるコードを記述します。

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  // クリックされたときの処理
});

キープレスイベントリスナー: キーボードのキーが押されたときに実行されるコードを記述します。

document.addEventListener('keypress', function(event) {
  // 押されたキーに応じた処理
});

フォームの送信イベントリスナー: フォームが送信されたときに実行されるコードを記述します。

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル
  // フォームの送信時の処理
});

マウスオーバーイベントリスナー: 要素にマウスが乗ったときに実行されるコードを記述します。

const element = document.querySelector('#myElement');
element.addEventListener('mouseover', function() {
  // マウスが乗ったときの処理
});

これらは一部の基本的なイベントリスナーの例ですが、JavaScriptではさまざまなイベントとそれに対応するリスナーが存在します。イベントリスナーの詳細な使い方や他の種類のイベントについては、公式のJavaScriptドキュメントや関連するチュートリアルを参照してください。

このようにして、JavaScriptのイベントリスナーを使用して、動的なWebアプリケーションやインタラクティブな要素を作成することができます。