イベントオブジェクト
target や type などのイベント情報を読み取ります。
「イベントオブジェクト」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
イベント引数
イベントが発生すると、ブラウザーはイベントオブジェクトをハンドラーに渡します。イベントオブジェクトには、何が起きたのか、どの要素が関係しているのかといった詳細が含まれています。
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.typeはイベント名です。これにより、1つのハンドラーでイベントの種類ごとに異なる処理を実行できます。
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.targetは、イベントが実際に発生した要素、つまり操作された最も深い位置にある要素です。
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTargetは、現在リスナーが実行されている要素、つまりaddEventListenerを呼び出した対象の要素です。
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});targetとcurrentTargetの違い
イベントがバブリングするとき、targetは子要素で、currentTargetはイベントを監視している親要素になる場合があります。この違いを利用するのがイベント委譲です。
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});イベント委譲
親要素に1つのリスナーを設定し、target.closestを使って操作された子要素を特定します。多数のリスナーを設定するよりも効率よく拡張できます。
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStampはイベントが作成された時刻を記録します。イベント間の経過時間の測定に便利です。
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});マウスイベントの座標
マウスイベントには、ビューポートを基準とするclientX/clientYや、ドキュメントを基準とするpageX/pageYなどの位置情報が含まれます。
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});修飾キー
e.shiftKey、e.ctrlKey、e.altKey、e.metaKeyなどのプロパティから、どの修飾キーが押されていたかがわかります。
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrustedは、実際のユーザー操作によるイベントではtrue、スクリプトで作成されたイベントではfalseになります。これにより、本物の入力かどうかを判別できます。
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});キーを読み取る
キーボードイベントにはe.key（入力された文字またはキー名）が含まれているため、特定のキーに反応できます。
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});クイックチェック
2つの対象を区別してください。
まとめ
イベントオブジェクトには、イベントの情報としてtype、target（イベントが発生した場所）、currentTarget（リスナーが設定されている場所）が含まれます。これらの違いによってイベント委譲が可能になります。イベントからは、座標、修飾キー、key、timeStamp、isTrustedも取得できます。
よくある質問
「イベントオブジェクト」レッスンは無料ですか？
はい。「イベントオブジェクト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「イベントオブジェクト」で何を学びますか？
target や type などのイベント情報を読み取ります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「イベントオブジェクト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。