学ぶ JavaScriptにおけるイベントオブジェクトの理解 | JavaScriptにおけるイベント処理とユーザーインタラクション

メニューを表示するにはスワイプしてください

JavaScriptでイベントが発生すると、eventオブジェクトが自動的にイベントハンドラーに渡されます。このオブジェクトには、イベントを発生させた要素（target）、イベントの種類（type）、preventDefault()やstopPropagation()などイベントの挙動を制御するためのメソッドなど、イベントに関する重要な情報が含まれています。

イベント関連情報へのアクセス

eventオブジェクトには、イベントに関する情報へアクセスしたり、イベントと対話したりするための便利なプロパティやメソッドが複数含まれています。

target

targetプロパティは、イベントを発生させた要素を指します。どの要素がクリック、ホバー、または操作されたかを特定するのに役立ちます。

index.html

index.css

index.js

event.target はクリックされた特定のボタンを識別するために使用され、その id が display というIDを持つ段落に表示される。

type

type プロパティは発生したイベントの種類（例：click、submit、keydown）を提供する。

index.html

index.css

index.js

event.type はフィードバックとして段落に表示され、click イベントが発生したことを示します。また、ボタンがクリックされると、body 全体の背景色が lightblue に変更されます。

イベントオブジェクトの preventDefault() メソッド

preventDefault() メソッドは、リンクの遷移を止めたり、フォームの送信を防いだりするなど、要素のデフォルト動作を停止します。

index.html

index.css

index.js

ここでは、preventDefault() によってリンクをクリックした際のデフォルト動作（新しいページへの遷移）が防止されます。代わりに、アラートが表示されます。

実践例：フォーム送信の処理とイベントオブジェクトの活用

フォームの検証を行い、入力欄が空の場合は送信を防止し、フォームデータとともに target、type などのイベント関連情報や、preventDefault() によるデフォルト送信の防止方法を表示します。

index.html

index.css

index.js

「サインアップ」フォームが送信されると、イベントリスナーが event.preventDefault() で送信を中断します。ユーザー名またはパスワードのいずれかが未入力の場合はエラーメッセージが表示され、両方が入力されていれば送信されたユーザー名を含む成功メッセージが表示されます。さらに、イベントの種類、フォームID、デフォルト動作が防止されたかどうかなど、イベントに関する詳細が専用セクションに表示されます。その後、フォームは再利用のためにリセットされます。