はじめに
これまで理解しなきゃと思い続けていたイベントオブジェクトを、基本から整理してみました。
そのため、初めて触れる方やこれから学習を始める方に向けた記事です。
イベントオブジェクトとは？
イベントオブジェクトについて調べてみたところ、ユーザーがクリックやキー入力などのアクションを起こしたときに、ブラウザが自動的に作ってくれるイベント情報を持ったオブジェクトことのようです。
言葉だけだと分かりにくいので、実際にコードで確認してみたいと思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="/src/test.ts"></script>
</head>
<body>
<button id="add-Button">追加</button>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("click", e => {
console.log(e);
});
});
ボタンにクリックイベントを設定して、イベントオブジェクトをコンソールに出力してみました。
コンソールの出力結果
-
target：クリックしたボタンの情報 -
type：clickという値
確かにイベント関連の情報が詰まっていることが分かりますね。
イベントオブジェクトはどこから来るの？
addEventListener()のコールバック関数でイベントオブジェクトを受け取れるのは、どうしてなのでしょうか？
答え：addEventListener()の仕様
MDNのドキュメントを見てみると、次のように書かれています。
コールバック関数は、発生したイベントを説明するEventに基づくオブジェクトを唯一の引数として受け取る
つまり、addEventListener()が、コールバック関数の第一引数にイベントオブジェクトを自動で渡してくれる仕様になっているんですね。
参考リンク
イベントオブジェクトが使える場面
イベントオブジェクトには色々なプロパティやメソッドがたくさんあります。
ここでは、実際に使えそうなものをいくつか考えてみました。
e.target
イベントが実際に発生した要素を取得できます。
その要素が持っているidやclassなどの情報も取得できるため、特定の要素がクリックされたときだけ処理を実行する、といったことが可能です。
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("click", e => {
// 特定のidを持つ要素がクリックされたときだけ処理
if (e.target.id === "add-Button") {
console.log("追加ボタンがクリックされました");
}
});
});
e.type
発生したイベントの種類を取得できます。
1つの関数で複数のイベントを処理したいときに、イベントの種類によって処理を分岐させることができます。
document.addEventListener("DOMContentLoaded", () => {
const handleMouseEvent = e => {
switch (e.type) {
case "mouseenter":
// マウスが乗ったら背景色を変更
e.target.style.backgroundColor = "lightblue";
break;
case "mouseleave":
// マウスが離れたら背景色を元に戻す
e.target.style.backgroundColor = "";
break;
}
};
const box = document.querySelector(".box");
box.addEventListener("mouseenter", handleMouseEvent);
box.addEventListener("mouseleave", handleMouseEvent);
});
e.preventDefault()
ブラウザのデフォルト動作を防ぐことができます。
フォーム送信やリンクのページ遷移を止めて、独自の処理（バリデーションチェックや非同期通信など）を実行したいときに使います。
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("form").addEventListener("submit", e => {
// フォームのデフォルト送信を防ぐ
e.preventDefault();
// 独自の処理を実行（バリデーションチェックなど）
console.log("フォーム送信を防ぎ、独自の処理を実行");
});
});
まとめ
この記事では、イベントオブジェクトの基本について学びました。
- イベントオブジェクトは、イベント関連の情報持ったオブジェクト
-
addEventListener()が自動的にコールバック関数の第一引数として渡してくれる -
e.targetで操作された要素を特定できる -
e.typeでイベントの種類を判定できる -
e.preventDefault()でブラウザのデフォルト動作を防げる
イベントオブジェクトを理解することで、より柔軟なイベント処理が書けるようになることを学べました！
実際のコードで試してみたいと思います！