イベントとイベントリスナーのイントロダクション

JavaScriptにおけるイベントとは

JavaScriptは、これらのイベントを処理し、特定のコードを実行する仕組みを提供しており、ウェブアプリケーションにインタラクティブ性と動的な動作をもたらします。

よく使われるイベントタイプ

addEventListener() の説明とイベントリスナーの設定方法

JavaScript でイベントに応答するには、要素にイベントリスナーを設定します。最も一般的な方法は addEventListener() 関数を使うことで、特定のイベントを監視し、イベントが発生したときに関数を呼び出します。

element.addEventListener('event', function, useCapture);

• event: 監視したいイベントの種類（例：'click'、'submit'）;
• function: イベントが発生したときに実行されるコールバック関数;
• useCapture（オプション）: イベントをキャプチャリングフェーズまたはバブリングフェーズのどちらで監視するかを示すブール値（デフォルトは false で、バブリングフェーズで監視）。

クリックイベントリスナー

ボタンに click イベントリスナーを設定します。クリックされるとアラートが表示されます。

イベントリスナーは #myButton 要素に付与されており、ユーザーがボタンをクリックすると、"Button clicked!" というテキストのメッセージボックスが表示されます。

Submitイベントリスナー

submit イベント用のイベントリスナーを追加し、デフォルトのフォーム送信動作を防止して、JavaScriptでデータを処理します。

フォームの submit イベントにイベントリスナーを設定し、event.preventDefault() でデフォルトの送信を防止。これにより、カスタムJavaScriptでデータ処理が可能。送信時、入力された名前を取得し、IDが displayName の段落に表示。

キープレスイベント

入力フィールドに keypress イベントリスナーを追加。キーが押されると、そのキーが段落に表示。

入力フィールドでキーが押されるたびに、押されたキーがコンソールに記録されます。

実践例：送信時のフォームバリデーションの処理

フォーム送信前にバリデーションを行うロジックの作成。

submit イベントリスナーは、必須フィールドが空の場合にフォームが送信されないようにします。ユーザー名またはパスワードのいずれかのフィールドが空の場合、イベントの進行が防止され、エラーメッセージが表示されます。