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

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