JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonfocusoutイベントとは？基本的な使い方とサンプルコードを解説

JavaScriptのonfocusoutイベントは、要素がフォーカスを失おうとした瞬間に発生するイベントです。テキスト入力欄からユーザーが別の場所へ移動したタイミングを検知したい場合などに活用できます。

この記事では、onfocusoutイベントの基本的な仕組みと、実際に動作するサンプルコードを通じてその実装方法を解説します。

onfocusoutイベントの基本

onfocusoutイベントは、input要素やtextarea要素など、フォーカスを受け取れる要素に対して設定できます。フォーカスが外れた直後に指定した関数を実行できるため、入力値のバリデーション（検証）や表示の切り替えなどに便利です。

サンプルコード

以下のコードでは、テキスト入力欄からフォーカスが外れると、入力欄の背景色が青色に変化します。実際にブラウザで実行して動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <p>下記に入力してください：</p>
      <p>フォーカスが外れると、入力欄の背景色が変わります。</p>
      <input type = "text" onfocusout = "newFunc(this)">
      <script>
         function newFunc(x) {
            x.style.background = "blue";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルのポイントは以下の通りです。

  • input要素にonfocusout属性を設定し、フォーカスが外れたときにnewFunc関数を呼び出しています。
  • 引数のthisによって、イベントが発生した要素自身への参照を関数に渡しています。
  • newFunc関数内では、渡された要素のstyle.backgroundプロパティを「blue」に変更することで、背景色を青色に切り替えています。

blurイベントとの違い

onfocusoutイベントは似た動作をするblurイベントとよく比較されます。主な違いはイベントバブリングの有無です。onfocusoutイベントは親要素へバブルアップ（伝播）しますが、blurイベントは伝播しません。そのため、フォーム全体など親要素レベルでフォーカスの移動を監視したい場合は、onfocusoutイベントが適しています。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します