JavaScriptのフォーカスイベントとは？種類と使い方を実例付きで解説
JavaScriptのフォーカスイベントとは
フォーカスイベントは、要素がフォーカスを取得したとき、あるいはフォーカスを失ったときに発生するイベントです。テキストボックスやフォーム要素をクリックしたとき、Tabキーで移動したときなどに発生し、入力フォームのバリデーションやUIの強調表示など、さまざまな場面で活用されます。
主なフォーカスイベントの種類
| イベント | 説明 |
|---|---|
| blur | 要素がフォーカスを失ったときに発生します。 |
| focus | 要素がフォーカスを取得したときに発生します。 |
| focusin | 要素がフォーカスを取得しようとしているときに発生します。focusとの違いは、親要素へのバブリングが行われる点です。 |
| focusout | 要素がフォーカスを失おうとしているときに発生します。blurと同様、バブリングが行われる点が特徴です。 |
これらのイベントはaddEventListener()メソッドを使って簡単に検知できます。
JavaScriptでのフォーカスイベントのサンプルコード
以下は、パスワード入力欄にフォーカスが当たったときに背景色を変更する例です。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptのフォーカスイベント</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>JavaScriptのフォーカスイベント</h1>
<form id="form">
<input type="text" placeholder="ユーザー名" />
<input class="passW" type="password" placeholder="パスワード" />
</form>
<h3>上のパスワード入力欄にフォーカスすると背景色が変わります</h3>
<script>
let passEle = document.querySelector(".passW");
passEle.addEventListener("focus", () => {
passEle.style.backgroundColor = "#90EE90";
});
</script>
</body>
</html>コードの解説
document.querySelector(".passW")で、クラス名「passW」が付いたパスワード入力欄を取得しています。addEventListener("focus", ...)により、その要素にフォーカスが当たった瞬間にコールバック関数が実行されます。- コールバック内で
style.backgroundColorを変更することで、入力欄の背景色が薄い緑色（#90EE90）に変わります。
実行結果
初期状態の画面は以下の通りです。
パスワード入力欄にフォーカスを当てると、背景色が緑色に変化します。
まとめ
フォーカスイベントを使うことで、ユーザーがどの入力欄を操作しているかを検知し、動的なフィードバックを提供できます。focus／blurはバブリングしないのに対し、focusin／focusoutはバブリングするため、イベント委譲を使いたい場合は後者を選ぶとよいでしょう。
-
JavaScriptのロードイベントとは？ページ読み込みイベントの種類と使い方を解説
JavaScriptにおけるページのロードイベントは、Webページが読み込まれる、またはアンロード（破棄）されるタイミングで発生します。これらのイベントを適切に使い分けることで、ページの状態に応じた処理を正確に実行できるようになります。 主なロードイベントの種類 JavaScriptで利用できる代表的なページロードイベントは以下の通りです。 イベント説明 DOMContentLoadedDOMツリーの構築が完了した時点で発生します。スタイルシートや画像などの外部リソースがまだ読み込まれていなくても実行されるため、高速な初期化処理に適しています。 Loadブラウザがすべてのリソース（画像
-
JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説
JavaScriptにおけるスクロールイベント（scroll event）は、ユーザーがスクロールバーを上下に操作したときに発生するイベントです。ページのスクロール位置に応じて処理を実行したい場合に活用される、非常に重要なイベントのひとつです。 スクロールイベントの基本的な仕組み スクロールイベントは、windowオブジェクトやスクロール可能な要素に対してaddEventListener()メソッドを使って登録できます。スクロールが行われるたびに、登録した関数が繰り返し呼び出される仕組みになっています。 以下は、JavaScriptでスクロールイベントを使用したサンプルコードです。 サンプルコ