【徹底比較】HTMLのonBlurとonChange属性！使い分けで開発効率アップ！

2024-07-27

HTMLにおけるonBlurとonChange属性の違い

onBlurは、要素がフォーカスを失ったときにトリガーされます。つまり、ユーザーが要素をクリックして入力し、その後別の要素をクリックしたり、ブラウザのウィンドウ外をクリックしたりして、その要素からフォーカスを外したときにイベントが発生します。

一方、onChangeは、要素の値が変更されたときにトリガーされます。つまり、ユーザーが要素に入力した値を変更したときにイベントが発生します。これは、フォーカスを失ったときだけでなく、フォーカスが保持されている間に入力した値を変更した場合にも発生します。

例：

以下のHTMLコードを見てみましょう。

<input type="text" id="myInput" onblur="onBlurFunction()" onchange="onChangeFunction()">

このコードでは、myInputというIDを持つテキスト入力フィールドが定義されています。このフィールドに対して、onBlurFunctionという関数がonBlurイベントハンドラとして、onChangeFunctionという関数がonChangeイベントハンドラとして割り当てられています。

ユーザーがmyInputフィールドをクリックしてフォーカスし、値を入力した場合、以下のようになります。

ユーザーが値を入力している間は、onChangeFunctionはトリガーされません。
ユーザーが入力し終えて、別の要素をクリックしてフォーカスを外したときに、onBlurFunctionがトリガーされます。

onBlur: 要素がフォーカスを失ったときにトリガーされる
onChange: 要素の値が変更されたときにトリガーされる

使い分け：

ユーザーが要素からフォーカスを外したときに処理を実行したい場合はonBlurを使用します。
ユーザーが入力した値が変更されたときに処理を実行したい場合はonChangeを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>onBlurとonChangeのサンプル</title>
</head>
<body>
  <h1>onBlurとonChangeのサンプル</h1>
  <input type="text" id="myInput" onblur="onBlurFunction()" onchange="onChangeFunction()">
  <p id="demo"></p>

  <script>
    function onBlurFunction() {
      document.getElementById("demo").innerHTML = "フォーカスが外れました";
    }

    function onChangeFunction() {
      document.getElementById("demo").innerHTML = "値が変更されました";
    }
  </script>
</body>
</html>

このコードを実行すると、以下のようになります。

ユーザーがmyInputフィールドをクリックしてフォーカスします。
ユーザーが入力した値を変更します。
ユーザーが入力し終えて、別の要素をクリックしてフォーカスを外します。

このとき、以下のメッセージが順に出力されます。

値が変更されました
フォーカスが外れました

説明：

このコードでは、myInputというIDを持つテキスト入力フィールドが定義されています。
このフィールドに対して、onBlurFunctionという関数がonBlurイベントハンドラとして、onChangeFunctionという関数がonChangeイベントハンドラとして割り当てられています。
onBlurFunctionは、要素がフォーカスを失ったときにトリガーされ、demoというIDを持つ要素に「フォーカスが外れました」というメッセージを出力します。

inputイベント

inputイベントは、要素の値が変更されたときにトリガーされます。onChangeイベントと似ていますが、inputイベントは、ユーザーが入力している最中にもトリガーされます。

<input type="text" id="myInput" oninput="onInputFunction()">

このコードでは、myInputというIDを持つテキスト入力フィールドが定義されています。このフィールドに対して、onInputFunctionという関数がinputイベントハンドラとして割り当てられています。

ユーザーが入力している最中、onInputFunctionが繰り返しトリガーされます。

inputイベントを使用する場合は、ユーザーが入力している最中に処理を実行する必要がある場合に適しています。

addEventListenerメソッド

addEventListenerメソッドを使用して、任意のイベントハンドラを要素に割り当てることもできます。

<input type="text" id="myInput">

const inputElement = document.getElementById("myInput");

inputElement.addEventListener("blur", onBlurFunction);
inputElement.addEventListener("change", onChangeFunction);
inputElement.addEventListener("input", onInputFunction);

function onBlurFunction() {
  // ...
}

function onChangeFunction() {
  // ...
}

function onInputFunction() {
  // ...
}

このコードでは、myInputというIDを持つテキスト入力フィールドが取得されています。その後、blurイベント、changeイベント、inputイベントそれぞれに対して、onBlurFunction、onChangeFunction、onInputFunctionという関数がイベントハンドラとして割り当てられています。

この方法を使用する場合は、onBlur、onChange、inputイベント以外にも、任意のイベントハンドラを割り当てることができます。