スポンサードリンク

JavaScript側でイベントハンドラ設定

前回はhtml側でイベントハンドラを設定したため、せっかくプログラムとデザインを分離したのに、またhtmlが複雑になってきました。このままではイベントハンドラを追加するたびにhtmlの修正が必要になるかもしれません。

実は解決策があります。基本的にイベントハンドラはhtmlタグの中に書くことになっていますが、JavaScriptの中で書くことも可能です。今回はイベントハンドラの動的設定について学びましょう。


【1】テキストエディタで以下のように入力し、ファイル名は「sample009.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。

sample009.html

<html>
  <head>
    <script type="text/javascript" src="sample009.js"></script>
    <title>sample009</title>
  </head>
  <body>
    <form name="form1">
      <input type="text" name="txtA" id="txtA">
      <select name="selOpe" size=1>
        <option value="1">+</option>
        <option value="2">−</option>
        <option value="3">×</option>
        <option value="4">÷</option>
        <option value="5">%</option>
      </select>
      <input type="text" name="txtB" id="txtB"> =
      <input type="text" name="txtC" id="txtC">
      <br>
      <input type="button" name="cmdCalc" id="cmdCalc" value="計算">
      <input type="reset" value="クリア">
    </form>
  </body>
</html>



【2】テキストエディタで以下のように入力し、ファイル名は「sample009.js」で上のhtmlと同じ場所に保存してください。コピーして貼り付けてもかまいません。

sample009.js

onload = init;


function init() {
  document.getElementById("txtA").onblur = function (){Blur(this);}
  document.getElementById("txtA").onfocus = function (){Focus(this);}
  document.getElementById("txtB").onblur = function (){Blur(this);}
  document.getElementById("txtB").onfocus = function (){Focus(this);}
  document.getElementById("txtC").onblur = function (){Blur(this);}
  document.getElementById("txtC").onfocus = function (){Focus(this);}
  document.getElementById("cmdCalc").onclick = function (){Calc();}
}


function Calc() {
  //変数の宣言
  var a;
  var b;
  var c;
  var ope;

  //withを使って簡潔に書く

  with (document.form1) {
    a = parseInt(txtA.value);
    b = parseInt(txtB.value);
    ope = parseInt(selOpe.value);
  }

  //セレクトボックスによって処理を変える
  switch (ope) {
    case 1:
      c = a + b;
      break;
    case 2:
      c = a - b;
      break;
    case 3:
      c = a * b;
      break;
    case 4:
      c = a / b;
      break;
    case 5:
      c = a % b;
      break;
    default:
      break;
  }

  //計算結果を表示
  document.form1.txtC.value = c;
}


function Focus(obj){
    obj.style.backgroundColor = "#ffff00";
}


function Blur(obj){
    obj.style.backgroundColor = "#ffffff";
}



【3】保存したら sample009.html をダブルクリックしてWebブラウザで開きます。
★sample009.htmlとsample009.jsは必ず同じフォルダ内に置いてください。


【4】プログラムの動き自体は変わっていないことを確認してください。


【解説】
まず、html側ではイベントハンドラを削除し、変わりにコントロール(テキストボックス、ボタンなどの部品)には id="" を追加しました。名前は name と同じでかまいません。

<input type="text" name="txtA" id="txtA">

これでhtmlがすっきりしました。イベントハンドラを追加したい場合もhtmlを変更する必要がありません。

次はJavaScript部分です。JavaScriptでイベントハンドラを設定する基本的は書き方は以下の通りです。関数名の後に()カッコが付かない点に注目してください。

オブジェクト.イベントハンドラ名 = 関数名;

html読み込み完了時を感知するイベントハンドラに関数initを設定しています。
onload = init;
正式には
window.onload = init;
と書きますが、windowは省略できます。これで最初にinit()が実行されるようになりました。イベントハンドラの設定は関数init()内で設定することにします。

オブジェクトは htmlで書いたid=""を使い以下のように取得できます。

document.getElementById("txtA")

上記を踏まえて、前回までhtml部分で指定していた部分をJavaScriptで書いてみましょう。
<input type="text" name="txtA" onblur="Blur(this);">

こうなりそうですが、
document.getElementById("txtA").onblur = Blur;

このままでは上手く動きません。関数に引数を指定していないのでどのコントロールで起こったイベントか判断できないからです。

そこで「無名関数」を使います。無名関数とはその名の通り関数名がない関数です。無名関数を使うと基本的な書き方は次のように変わります。

オブジェクト.イベントハンドラ名 = = function (){
ここに処理を書く;
ここに処理を書く;
}

functionの後に関数名が無い点に注目してください。処理は{}カッコ内に書いても良いのですが、すでに Blur()という関数を作っていますので、無名関数内で別の関数を呼び出すことにしました。処理が1つしかない場合は1行で書いてもかまいません。

document.getElementById("txtA").onblur = function (){Blur(this);}

これで 関数Blur() に引数を渡すことができるのできちんと動くようになります。thisとはイベントが起こったテキストボックスのことを指します。

以上でプログラムとデザインが完全に分離できました。htmlはすっきりし、プログラム的な変更は「.js」ファイル側だけいじればよいことになりました。デザイナーがnameとidを設定してくれればプログラマーと作業が分担できます。

スポンサードリンク






JavaScript初心者入門講座TOPへ