HTMLとイベント

JavaScript

今働いているプロジェクト(Java)では、コードテーブルをリストボックス表示してくれる便利なTabLibがあるので利用しています。

表示させるだけなら便利なのだけど・・・onchangeなどを受け付けてくれないためイベントを利用する際はtablibを利用することができません。


なので、泣く泣くhtml:optionsCollection を使って表示してました（これが使いづらい(T_T)）


しかし、tablibのなかでonchangeが指定できなくても、body の onLoad()でイベントとイベントハンドラ(ってJavaScriptでも言うのか？）を結びつけることで解決できました。




<html>

<head>

<script type="text/javascript">

   function init()

   {

       // list1のonchangeイベントとイベントハンドラを結びつける

       document.frm.list1.onchange = list1_onchange;

   }

   

   function list1_onchange()

   {

       // 引数でオブジェクトを渡せないので、関数を使いまわせない

       alert(document.frm.list1.options[document.frm.list1.selectedIndex].value);

   }

   

   function list2_onchange( lst2 )

   {

       // 引数でオブジェクトを受け取ることができるので、使いまわすことができる

       alert(lst2.options[lst2.selectedIndex].value);

   }

   

</script>

</HEAD>

<body onload="init();">

  <form name="frm">

   

    <select name="list1" >

      <option value="" selectedoptionvalue="val1">リスト1-1

      <option value="val2">リスト1-2

      <option value="val3">リスト1-3

    </SELECT>

   

    <select name="list2" onchange='list2_onchange(this);'>

      <option value="" selectedoptionvalue="val1">リスト2-1

      <option value="val2">リスト2-2

      <option value="val3">リスト2-3

    </SELECT>

  </form>

</body>

</html>

list2_onchange( lst2 )は、イベントが起きたオブジェクトを受け取れますが、list1_onchange()ではオブジェクトを受け取れません。

そのため、関数を使いまわすことができません・・・

と思ったのですが




   function list1_onchange()

   {

       // イベントソースを取得する

       var lst1 = event.srcElement;

       // 引数で渡されたオブジェクトと同じように使える

       alert(lst1.options[lst1.selectedIndex].value);

   }


eventオブジェクトから、srcElementを取得することで使いまわしできるようになりました。

#あぁ、半年前に気づいてりゃJavaScriptの量産しなくて済んだのに・・・orz